<div class="wrap-input100 validate-input m-t-85 m-b-35">
<input class="input100" type="text" id="username" name="username" placeholder="用户名">
<span class="focus-input100"></span>
</div>
/*------------------------------------------------------------------
[ Input ]*/
.wrap-input100 {
width: 100%;
position: relative;
border-bottom: 2px solid #d9d9d9;
}
.input100 {
font-family: Poppins-SemiBold;
font-size: 16px;
color: #555555;
/*line-height: 1.2;*/
display: block;
width: 100%;
height: 35px;
background: transparent;
padding: 0 5px;
}
/*---------------------------------------------*/
.focus-input100 {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.focus-input100::before {
content: "";
display: block;
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
background: #7765ff;
}
.focus-input100::after {
font-family: Poppins-Medium;
font-size: 18px;
color: #999999;
line-height: 1.2;
content: attr(data-placeholder);
display: block;
width: 100%;
position: absolute;
top: 15px;
left: 0px;
padding-left: 5px;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.input100:focus + .focus-input100::after {
top: -20px;
font-size: 15px;
}
.input100:focus + .focus-input100::before {
width: 100%;
}
.has-val.input100 + .focus-input100::after {
top: -20px;
font-size: 15px;
}
.has-val.input100 + .focus-input100::before {
width: 100%;
}
View Code
.p-t-85 {
padding-top: 10px;
}
.p-b-70 {
padding-bottom: 35px;
}
.m-t-85 {
margin-top: 15px;
}
本文来自博客园，作者：咸瑜，转载请注明原文链接：javascript:void(0)p/16015775.html
