:read-write

版本：CSS3

CSS伪类:read-write代表一个元素（例如可输入文本的元素）可以被用户编辑。:read-write选择器刚好与:read-only选择器相反，主要用来指定当元素处于非只读状态时的样式。

语法:

• :read-write选择器用于匹配可读及可写的元素。
• 目前，在大多浏览器中,:read-write选择器只使用于设置了和元素。

/* 选择所有可编辑的  元素 */
/* firefox 中需要加前缀 */
input:-moz-read-write {
  background-color: #bbf;
}

/* supported in blink/webkit/edge without a prefix */
input:read-write {
  background-color: #bbf;
}

注意：这个选择器不仅仅选择元素，它也会选择所有可以被用户编辑的元素，例如设置了contenteditable属性的

浏览器支持

例子

//HTML 
this is a normal paragraph.
you can edit this paragraph!
//CSS

input { min-width: 25em; }
input:-moz-read-write { background: cyan; }
input:read-write { background: cyan; }

p:-moz-read-write { background: lightgray; }
p:read-write { background: lightgray; }
p[contenteditable="true"] { color: blue; }

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

//HTML 
 姓名: 
 
 地址: 
//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;
}

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com