:read-only选择器

来源:互联网 发布:Unity3d添加GameObject 编辑:程序博客网 时间:2024/06/10 07:38

:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是,元素中设置了“readonly=’readonly’

示例演示

通过“:read-only”选择器来设置地址文本框的样式。

HTML代码:

<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></form>  


CSS代码:

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;}

结果演示

任务

在右边CSS编辑的第28行,输入正确的代码,设置textarea的只读样式。

<!DOCTYPEwww.dztcsd.com/  html>
<html>
<head> 
<meta charset="utf-8">
<title>属性选择器</title>
<link href="style.css" rel="stylesheet" type="text/css">
</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>

0 0
原创粉丝点击