:read-write

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

:read-write CSS 伪类 代表一个元素（例如可输入文本的 input 元素）可以被用户编辑。

css
/* 选择所有可编辑的 <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> 元素。

语法

Error: could not find syntax for this item

示例

HTML

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

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

结果

规范

Specification
HTML
# selector-read-write
Selectors Level 4
# read-write-pseudo

浏览器兼容性

参见