:read-only

翻译不完整。 请帮助我们翻译这篇文章!

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

注意:这个选择器不只是选择具有 readonly 属性的<input> 元素,它也会选择所有的不能被用户编辑的元素。

语法

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

输出

规范

规范 状态 备注
HTML Living Standard
:read-only
Living Standard No change.
HTML5
:read-only
Recommendation Defines the semantics regarding HTML and constraint validation.
Selectors Level 4
:read-only
Working Draft Defines the pseudo-class, but not the associated semantics.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:read-onlyChrome Full support 1Edge Full support 13Firefox Full support 78
Full support 78
Full support 1.5
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE No support NoOpera Full support 9Safari Full support 4WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4
Prefixed
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Opera Android Full support 10.1Safari iOS Full support 3.2Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

参阅