--- title: ':read-only' slug: 'Web/CSS/:read-only' tags: - CSS - readOnly translation_of: 'Web/CSS/:read-only' ---
{{CSSRef}}

 :read-only 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;
}

注意：这个选择器不只是选择具有 {{htmlattrxref("readonly", "input")}} 属性的{{htmlElement("input")}} 元素，它也会选择所有的不能被用户编辑的元素。

语法

{{csssyntax}}

示例

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

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

输出

{{EmbedLiveSample("Example")}}

规范

规范 状态 备注
{{ SpecName('HTML WHATWG', '#selector-read-only', ':read-only') }} {{ Spec2('HTML WHATWG') }} No change.
{{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }} {{ Spec2('HTML5 W3C') }} Defines the semantics regarding HTML and constraint validation.
{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }} {{ Spec2('CSS4 Selectors') }} Defines the pseudo-class, but not the associated semantics.

浏览器兼容性

{{Compat("css.selectors.read-only")}}

参阅