滑動輸入字段的底部邊框不工作

我有一組輸入字段，我想動畫的邊框底部從左到右滑動焦點只使用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

滑動輸入字段的底部邊框不工作

回答

相關問題