input border 그라디언트 CSS

방법 1 . border 그라디언트 

.box { position: relative; width: 100%; height: 90px; background-color: #061c4e; } 
.box::before { padding: 1px; position: absolute; background:linear-gradient(160deg,#1CC8FF,#9E00FF); content: ""; inset: 0; border-radius: 12px;
     -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); 
     -webkit-mask-composite: xor; 
     mask-composite: exclude; }

 

방법 2 . input border 그라디언트 

<div class="inputWrap">
   <input type="number" value="7">
   <span>%</span> 
</div>

.inputWrap input {
    border: 2px solid transparent;
    position: relative;
    width: 132px;
    height: 65px;
    background-color: transparent !important;
    background-image: linear-gradient(#051f60, #051f60), linear-gradient(135deg, #1765fe, #831cff);
    background-clip: padding-box, border-box;
    background-origin: border-box;
    font-size: 36px;
    color: #1CC8FF;
    text-align: center;
    border-radius: 12px;
}

 

 

방법 3   input border autofill 디자인 깨질때 

(아이디 비번등 브라우저별 오토필 때문에 디자인이 틀어질 경우) 
그냥 박스 두개를 겹쳐서 눈속임한다.

<label>
   <span class="gradi">
      <input type="text" placeholder="아이디" >
   </span>
</label>

.inText label { position: relative; } 
.inText .gradi { display: flex;padding: 3px; width: 100%; height: 54px; background-image: linear-gradient(135deg, #53599e, #102950, #53599e); border-radius: 8px; } 
.inText { display: flex; gap: 1.4rem; flex-direction: column; width: 340px; }
input{ display:inline-block; margin:0; padding:10px 15px; border: 0 !important; width:100%; height:100%; 
background-color:#142d55;color:#fff; border-radius: 8px; }