点击这里给我发消息 点击这里给我发消息

HTML 5与CSS 3权威指南:E:invalid与E:valid

添加时间:2013-12-6
    相关阅读: 页面 HTML CSS
 

19.4.6   E:invalid伪类选择器与E:valid伪类选择器

  E:invalid伪类选择器用来指定,当元素内容不能通过HTML 5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容不符合元素的规定格式(例如通过使用type属性值为Email的input元素来限定元素内容必须为有效的Email格式)时的样式。

  E:valid伪类选择器用来指定,当元素内容通过HTML 5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容符合元素的规定格式(例如通过使用type属性值为Email的input元素来限定元素内容必须为有效的Email格式)时的样式。

代码清单19-25为一个E:invalid伪类选择器与E:valid伪类选择器的使用示例。示例页面中具有一个使用了required属性的input元素,当元素中没有被填入内容时元素背景色为红色,当元素中填入内容后元素背景色变为白色。

代码清单19-25   E:invalid伪类选择器与E:valid伪类选择器的使用示例

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

  <title> E:invalid伪类选择器与E:valid伪类选择器结合使用示例

  </title>

  <style type="text/css">

  input[type="text"]:invalid{

  background-color: red;

  }

  input[type="text"]:valid{

  background-color: white;

  }

  </style>

  </head>

  <body>

  <form>

  <p>请输入任意文字:<input type="text" required/>

  </p>

  </form>

  </body>

  </html>

咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册