:read-only
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.
: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;
}
语法
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;
}
结果
规范
Specification |
---|
HTML Standard # selector-read-only |
Selectors Level 4 # rw-pseudos |
浏览器兼容性
BCD tables only load in the browser
参见
:read-write
- HTML
contenteditable
attribute