针对表单的 CSS3 伪类选择器

发布日期:2015-09-15 16:54:11
除了前面已经了解的那些有趣的 CSS3 工具之外,CSS3 还提供了一些专门针对表单的伪
类选择器。
  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伪类选择器可以制作出优美的、 易于实现的增强效果, 可以大大提升用户填写表单的用户体验。

相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计