类选择器。
input:required :选择必填表单域;
input:focus:invalid :选择当前聚焦的且含有非法输入值的表单域;
input:focus:valid :选择当前聚焦的且含有合法输入值的表单域。
我们使用上面的伪类选择器再编写三条新规则:
input:required {
border: 1px solid rgba(253, 8, 8, 0.29);
}
input:focus:invalid {
background: url('../img/cross.png') no-repeat right;
padding-right: 3px;
}
input:focus:valid {
background: url('../img/tick.png') no-repeat right;
padding-right: 3px;
}
第一个规则给必填表单域加了一点红色边框。当用户输入时,如果所输入的值不符合规
定格式,则第二个样式会给当前的输入框加上一个红色叉号;如果输入值符合格式,则
第三个样式会给其加上一个绿色对号。
下面的截图显示了浏览器(Firefox v9)加载完页面的效果:
如果我们聚焦(点击)到一个必填输入框,右侧就会出现一个红色叉号(因为我们还没
输入有效的值) :
如果我们输入一个有效的值,红色的叉号就变成了绿色的对号:使用这些新的 CSS3伪类选择器可以制作出优美的、 易于实现的增强效果, 可以大大提升用户填写表单的用户体验。