:read-only

该:read-onlyCSS伪类选择不是由用户进行编辑的元素（诸如locked的文本输入框）。

/* 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 prefix */
input:read-only {
  background-color: #ccc;
}

注意：这个选择器不只是选择带有readonly设置的文本输入; 它会选择任何不能被用户编辑的元素。

语法

:read-only

实例

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

结果

规范

Specification	Status	Comment
HTML Living StandardThe definition of ':read-only' in that specification.	Living Standard	No change.
HTML5The definition of ':read-only' in that specification.	Recommendation	Defines the semantic regarding HTML and constraint validation.
Selectors Level 4The definition of ':read-only' in that specification.	Working Draft	Defines the pseudo-class, but not the associated semantic.

浏览器兼容性

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)	No support	No support	(Yes)-mozbug 312971	No support	No support	No support

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)	No support	No support	No support	(Yes)-mozbug 312971	No support	No support	No support