:read-write

基线 广泛可用

此功能非常成熟，并在许多设备和浏览器版本中运行。它自 2020 年 7 月.

报告反馈

尝试一下

语法

:read-write CSS 伪类 表示用户可以编辑的元素（例如 input 或 textarea）。
:read-write {
  /* ... */
}

示例

css

在只读/读写控件中确认表单信息

readonly 表单控件的一种用途是允许用户检查和验证他们可能在早期表单中输入的信息（例如，送货详情），同时仍然能够将信息与表单的其余部分一起提交。我们在下面的示例中就是这样做的。

:read-write CSS 伪类 表示用户可以编辑的元素（例如 input 或 textarea）。
input:-moz-read-only,
textarea:-moz-read-only,
input:read-only,
textarea:read-only {
  border: 0;
  box-shadow: none;
  background-color: white;
}

textarea:-moz-read-write,
textarea:read-write {
  box-shadow: inset 1px 1px 3px #ccc;
  border-radius: 5px;
}

:read-only 伪类用于删除使输入看起来像可点击字段的所有样式，使其看起来更像只读段落。另一方面，:read-write 伪类用于为可编辑的 <textarea> 提供一些更好的样式。

您可以在 readonly-confirmation.html 中找到完整的源代码；它呈现如下

为读写非表单控件设置样式

此选择器不仅仅选择 <input>/<textarea> 元素 - 它将选择任何用户可以编辑的元素，例如 <p> 元素，其 contenteditable 设置为打开。
<p contenteditable>This paragraph is editable; it is read-write.</p>

<p>This paragraph is not editable; it is read-only.</p>
:read-write CSS 伪类 表示用户可以编辑的元素（例如 input 或 textarea）。
p {
  font-size: 150%;
  padding: 5px;
  border-radius: 5px;
}

p:read-only {
  background-color: red;
  color: white;
}

p:read-write {
  background-color: lime;
}

规范

html
规范
# HTML 标准
selector-read-write
# 选择器级别 4

浏览器兼容性

rw-pseudos

另请参阅

  • :read-only
  • 已启用 JavaScript。启用 JavaScript 以查看数据。