1. 面向开发者的 Web 技术
  2. CSS：层叠样式表
  3. CSS 参考
  4. 选择器
  5. :read-only

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

:read-only

基线 广泛可用

自 2020年7月 起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

:read-only CSS 伪类 表示元素不可被用户编辑的状态（如锁定的文本输入框）。

css
/* Selects any <input> element that is read-only */
/* Supported in Firefox with a prefix */
input:-moz-read-only {
  background-color: #ccc;
}

/* Supported in Blink/WebKit/Edge without a prefix */
input:read-only {
  background-color: #ccc;
}

备注：这个选择器不只是选择具有 readonly 属性的<input> 元素，它也会选择所有的不能被用户编辑的元素。

语法

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-only {
  background: cyan;
}
input:read-only {
  background: cyan;
}

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

结果

规范

规范
HTML
# selector-read-only
Selectors Level 4
# read-only-pseudo

浏览器兼容性

参见

帮助改进 MDN

了解如何参与贡献

此页面最后更新于 ，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题