Сдвижная нижняя граница полей ввода не работает

Question

У меня есть набор полей ввода, и я хотел бы анимировать рамку-снизу, чтобы скользить слева направо по фокусу, используя только CSS-анимацию. Я пробовал следующий код, но ничего не происходит. Я новичок в анимации CSS.

HTML

Войти

CSS

.fields 
{ 
    color: #646c70; 
    border: none; 
    padding: 10px; 
    width: 83%; 
    position: relative; 
} 
.fields:after { 
    display:block; 
    content: ''; 
    border-bottom: solid 3px #019fb6; 
    transform: scaleX(0); 
    transition: transform 250ms ease-in-out; 
} 
.fields:focus:after { transform: scaleX(1); } 
.fields:after{ transform-origin: 0% 50%; } 

Я не уверен, что я сделал. Вот fiddle

Answer 1

Как вы не можете использовать псевдо-элементы на отдельных элементов тегов, как input, вы можете обернуть input в label и использовать span в качестве границы ... и анимировать width вместо scale.

label { 
 
    display: inline-block; 
 
    width: 83%; 
 
    overflow: hidden; 
 
} 
 
.fields { 
 
    color: #646c70; 
 
    border: none; 
 
    outline: none; 
 
    padding: 10px; 
 
    width: 100%; 
 
} 
 
.fields + span { 
 
    display: block; 
 
    border-bottom: solid 3px #019fb6; 
 
    width: 0; 
 
    -webkit-transition: width 250ms ease-in-out; 
 
    transition: width 250ms ease-in-out; 
 
} 
 
.fields:focus + span { 
 
    width: 110%;   /* used calc first, but won't work on Edge */ 
 
    -webkit-transition: width 250ms ease-in-out; 
 
    transition: width 250ms ease-in-out; 
 
}

<label> 
 
    <input class="fields" id="password" type="password" placeholder="Password"> 
 
    <span></span> 
 
</label>