7-6 CSS3选择器 :read-write选择器
本节编程练习不计算学习进度,请电脑登录imooc.com操作

CSS3选择器 :read-write选择器

:read-write”选择器刚好与“:read-only”选择器相反,主要用来指定当元素处于非只读状态时的样式。

示例演示

使用“:read-write”选择器来设置不是只读控件的文本框样式。

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

input[type="text"]:-moz-read-write{
  border-color: #f36;
}
input[type="text"]:read-write{
  border-color: #f36;
}

结果演示:

任务

在CSS编辑的第25行设置不是只读控件的文本框边框为2px solid red

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>属性选择器</title>
  6. <link href="style.css" rel="stylesheet" type="text/css">
  7. </head>
  8. <body>
  9. <form action="#">
  10. <div>
  11. <label for="name">姓名:</label>
  12. <input type="text" name="name" id="name" placeholder="大漠" />
  13. </div>
  14. <div>
  15. <label for="address">地址:</label>
  16. <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />
  17. </div>
  18. </form>
  19. </body>
  20. </html>
  1. form {
  2. width: 300px;
  3. padding: 10px;
  4. border: 1px solid #ccc;
  5. margin: 50px auto;
  6. }
  7. form > div {
  8. margin-bottom: 10px;
  9. }
  10. input[type="text"]{
  11. border: 1px solid orange;
  12. padding: 5px;
  13. background: #fff;
  14. border-radius: 5px;
  15. }
  16. input[type="text"]:-moz-read-only{
  17. border-color: #ccc;
  18. }
  19. input[type="text"]:read-only{
  20. border-color: #ccc;
  21. }
  22. input[type="text"]:-moz-read-write{
  23. border:2px solid red;
  24. }
  25. input[type="text"]?{
  26. border:2px solid red;
  27. }
下一节