HTML设置input只有底边框,css实现input聚焦底部边框动态

记录，如何用纯css实现input聚焦失焦的底部边框动态。

实现效果：

login page

input{

border: none;

outline: none;

caret-color: rgba(3,166,255,1)

}

.form-signin {

width: 40%;

padding: 60px 11% 75px;

background:rgba(255,255,255,1);

border-radius:4px;

-webkit-border-radius: 4px;

box-shadow:0px 5px 36px 0px rgba(170,170,170,0.35);

position: absolute;

left: 50%;

top: 22%;

transform: translateX(-50%);

}

.heading {

width:100%;

text-align: center;

margin-bottom: 40px;

}

.login-cell{

position: relative;

z-index: 1;

height: 50px;

margin-top: 12px;

display: flex;

display: -webkit-flex;