Html
    Css
    Js

    
                        
 div {
	width:800px;
	margin:200px auto;
	border:1px solid red;
	text-align:center;
}
input {
	width:100%;
	height:40px;
	border:1px solid #dbdbdb;
	outline:none;
	font-size:20px;
	text-indent:10px;
}
label {
	position:relative;
	width:400px;
	margin:10px auto;
	display:inline-block;
}
label:after {
	content:"";
	display:inline-block;
	width:0;
	height:2px;
	background:red;
	transition:width 1s;
	position:absolute;
	bottom:1px;
	left:1px;
}
.active:after {
	width:calc(100% - 2px)
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

输入框美化样式

2
      a663001980
      2019/4/17 17:47:05
      没钱吃饭0
      2018/9/8 15:24:48