: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 |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
