CSS3选择器 :read-only选择器
03/10
“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”
例如：设置textarea的只读样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style>
form {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
margin: 50px auto;
}
form > div {
margin-bottom: 10px;
}
input[type="text"]{
border: 1px solid orange;
padding: 5px;
background: #fff;
border-radius: 5px;
}
input[type="text"]:-moz-read-only{
border-color: #ccc;
}
input[type="text"]:read-only{
border-color: #ccc;
}
textarea:-moz-read-only{
border: 1px solid red;
height: 50px;
resize: none;
background: #eee;
}
textarea:read-only {
border: 1px solid red;
height: 50px;
resize: none;
background: #eee;
}
</style>
</head>
<body>
<form action="#">
<div>
<label for="name">姓名:</label>
<input type="text" name="name" id="name" placeholder="大漠" />
</div>
<div>
<label for="address">地址:</label>
<input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />
</div>
<div>
<label for="comment">评论：</label>
<textarea name="comment" id="" cols="30" rows="10" readonly="readonly"></textarea>
</div>
</form>
</body>
</html> 效果如下图：
版权属于：
Dcr163的博客
本文链接：
http://dcr163.cn/136.html（转载时请注明本文出处及文章链接）
