滑动输入字段的底部边框不工作

我有一组输入字段，我想动画的边框底部从左到右滑动焦点只使用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

来源

2016-09-26 Ayan

不能使用'：上'input'场 – APAD1

@APAD after'伪选择，所以我应该怎么用？ – Ayan

使用标签输入 – LGSon

正如你不能使用像input单标签元素伪元素，你可以换一个label的input并使用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>

来源

2016-09-26 18:36:51 LGSon

我在小提琴中试过，但看不到滑动效果。 – Ayan

@Ayan这是一个小提琴的作品：https://jsfiddle.net/hsLwzs61/ – LGSon

是的，但我真的不能看到从左到右滑动的线。取而代之的是我看到了边框的亮起。 – Ayan

滑动输入字段的底部边框不工作

回答

相关问题