玩好css的伪类及Css3的动画,要简化很多JavaScript代码,非常省力!
**
比如表单聚焦后显示红色,如果通过JavaScript是可以实现的,但是毕竟麻烦,要操作DOM,但是通过css的伪类一行就搞定
**
input:focus {
color:red
}
其次,你还可以通过聚焦表单时改变其他的元素,比如:
.user-box {
position: relative;
background: #F7F7F7;
height: 43px;
input {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 30px;
padding: 0 10px;
font-size: 12px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
}
label {
position: absolute;
left: 0;
bottom: 0;
padding: 0 10px;
color: #000;
pointer-events: none;
font-size: 12px;
transition: all .5s;
}
input:focus ~ label, input:valid ~ label {
position: absolute;
top: 0;
left: 0;
padding: 0 10px;
font-size: 10px;
color: #03e9f4;
}
}