19.4.7 E:required伪类选择器与E:optional伪类选择器
E:required伪类选择器用来指定允许使用required属性,且已经指定了required属性的input元素、select元素以及textarea元素的样式。
E:optional伪类选择器用来指定允许使用required属性,且未指定required属性的input元素、select元素以及textarea元素的样式。
代码清单19-26为一个E:required伪类选择器与E:optional伪类选择器的使用示例。示例页面中具有两个分别用于输入姓名与住址的文本框,并且对用于输入姓名的文本框指定了required属性,不对用于输入住址的文本框指定required属性。同时通过E:required伪类选择器指定用于输入姓名的文本框边框为红色,宽度为3px,通过E:optional伪类选择器指定用于输入住址的文本框边框为黑色,宽度为1px.
代码清单19-26 E:required伪类选择器与E:optional伪类选择器的使用示例
<!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:required伪类选择器与E:optional伪类选择器结合使用示例</title>
<style type="text/css">
input[type="text"]:required{
border-color: red;
border-width:3px;
}
input[type="text"]:optional{
border-color: black;
border-width:1px;
}
</style>
</head>
<body>
<form>
姓名:<input type="text" required placeholder="必须输入姓名"/><br/>
住址:<input type="text"/>
</form>
</body>
</html>