MDN wants to learn about developers like you:


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

Note: This selector doesn't just select <input>s with readonly set on them; it will select any element that cannot be edited by the user.





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


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



Specification Status Comment
HTML Living Standard
Living Standard No change.
Recommendation Defines the semantics regarding HTML and constraint validation.
Selectors Level 4
Working Draft Defines the pseudo-class, but not the associated semantics.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes)-mozbug 312971 Nightly build [1] (Yes) (Yes)
Editable element (except for text input fields) 未实现 未实现 (Yes)-mozbug 312971 未实现 未实现 未实现
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? (Yes) (Yes) (Yes)-mozbug 312971 ? ? ?
Editable element (except for text input fields) 未实现 未实现 未实现 (Yes)-mozbug 312971 未实现 未实现 未实现

[1]: MS Edge platform status: Windows Insider Preview Build 10547+

See also


 此页面的贡献者: King.
 最后编辑者: King.,