:read-write

版本： CSS3

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

语法:

E : read-write { sRules }

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

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

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

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

浏览器支持

Firefox 和 IE不支持 :read-write 选择器。Firefox 支持 :-moz-read-write 选择器作为替代方案。Chrome, Safari 和 Opera浏览器支持 :read-write

例子

//HTML

<input type="text" value="type whatever you want here.">
<input type="text" value="this is a read-only field." readonly>
<p>this is a normal paragraph.</p>
<p contenteditable="true">you can edit this paragraph!</p>

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

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