:只读

基线 广泛可用

此功能已很成熟,可在许多设备和浏览器版本上使用。它自 2020 年 7 月.

报告反馈

试一试

语法

The :read-only CSS 伪类 选择不可由用户编辑的元素(例如某些 <input> 类型和 <textarea>)。HTML 属性 readonly 不起作用的元素(例如 <input type="radio"><input type="checkbox"> 和所有其他非表单元素)也会被 :read-only 伪类选择。实际上,:read-only:read-write 不匹配的任何内容匹配,使其等效于 :not(:read-write)
:read-only {
  /* ... */
}

示例

css

使用只读或可读写控件确认表单信息

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

The :read-only CSS 伪类 选择不可由用户编辑的元素(例如某些 <input> 类型和 <textarea>)。HTML 属性 readonly 不起作用的元素(例如 <input type="radio"><input type="checkbox"> 和所有其他非表单元素)也会被 :read-only 伪类选择。实际上,:read-only:read-write 不匹配的任何内容匹配,使其等效于 :not(:read-write)
input:read-only,
textarea:read-only {
  border: 0;
  box-shadow: none;
  background-color: #ddd;
}

textarea:read-write {
  outline: 1px dashed red;
  outline-offset: 2px;
  border-radius: 5px;
}

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

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

此选择器不仅选择 <input>/<textarea> 元素——它将选择任何不可由用户编辑的元素。
<p contenteditable>This paragraph is editable; it is read-write.</p>

<p>This paragraph is not editable; it is read-only.</p>
The :read-only CSS 伪类 选择不可由用户编辑的元素(例如某些 <input> 类型和 <textarea>)。HTML 属性 readonly 不起作用的元素(例如 <input type="radio"><input type="checkbox"> 和所有其他非表单元素)也会被 :read-only 伪类选择。实际上,:read-only:read-write 不匹配的任何内容匹配,使其等效于 :not(:read-write)
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-only
# 选择器级别 4

浏览器兼容性

rw-pseudos

另请参阅

  • :read-write
  • 在启用 JavaScript 的情况下。启用 JavaScript 以查看数据。