19.4.3 E:read-only伪类选择器与E:read-write伪类选择器
E: read-only伪类选择器用来指定当元素处于只读状态时的样式。
E: read-write伪类选择器用来指定当元素处于非只读状态时的样式。
在Firefox浏览器中，需要写成"-moz-read-only"或"-moz-read-write"的形式。
代码清单19-20为E: read-only选择器与E: read-write选择器结合使用的一个示例，在该示例中有一个姓名文本框控件和一个地址文本框控件。其中姓名文本框控件不是只读控件，使用E:read-write选择器定义样式；地址文本框控件是只读控件，使用E: read-only选择器定义样式。
代码清单19-20 E: read-only伪类选择器与E:read-write伪类选择器结合使用的示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title> E: read-only伪类选择器与E:read-write伪类选择器结合使用示例
</title>
<style type="text/css">
input[type="text"]:read-only{
background-color: gray;
}
input[type="text"]:read-write{
background-color: greenyellow;
}
input[type="text"]:-moz-read-only{
background-color: gray;
}
input[type="text"]:-moz-read-write{
background-color: greenyellow;
}
</style>
</head>
<body>
<form>
<p>名前：<input type="text" name="name" />
<p>地址：<input type="text" name="address" value="江苏省常州市"
readonly="readonly" />
</p>
</form>
</body>
</html>
这段代码的运行结果如图19-30所示。
图19-30 E: read-only伪类选择器与E:read-write伪类选择器结合使用的示例
相关HTML 5与CSS 3权威指南：E:read-only与E:read-write伪类选择器