:read-only

CSS :read-only 伪类选择器用于匹配任何不可以被用户编辑的元素。

可以被用户编辑的元素包括：

任何不带 read-only 属性，并且不是 disabled 类型的 <input> 元素。 任何不带 read-only 属性，并且不是 disabled 类型的 <textarea> 元素。 除了 <input> 元素和 <textarea> 元素之外，带 contenteditable 属性的任何其它元素。

:read-only 伪类选择器可以匹配除上面列出的任何其它元素。

例如，下面的元素可以被 :read-only 伪类选择器选择：

<input type="text" disabled>

<input type="number" disabled>

<input type="number" readonly>

<textarea name="nm" id="id" cols="30" rows="10" readonly> </textarea>

<!-- 不带 contenteditable 属性的普通元素 -->
<div class="random"> </div> 

下面的元素不能被 :read-only 伪类选择器选择，它们可以被 :read-write 伪类选择器匹配。

<input type="text">

<input type="number">

<textarea name="nm" id="id" cols="30" rows="10"> </textarea>

<div class="random" contenteditable> </div>

示例代码

下面都是有效的 :read-only 规则。

.element:read-only:after {
    content: "Subscribe!";
    /* ... */
}

input:read-only {
    background-color: #aaa;
    border: 1px solid #888;
}

textarea:read-only:hover {
    cursor: not-allowed;
}

在线演示

在下面的例子中，如果你的浏览器支持 :read-write 伪类选择器，那么可编辑的元素的边框会显示为绿色。如果你的浏览器支持 :read-only 伪类选择器，那么可编辑的元素的边框会显示为橙色。

下面的input都是可编辑的，它们会被 :read-write 选择器匹配，边框变为绿色。

下面的input元素是 disabled 状态，不会被 :read-write 选择器匹配。

下面的input元素设置了 read-only 属性，是只读状态，它们会被 :read-only 选择器匹配。

下面的div元素带有 contenteditable 属性，它们会被 :read-write 选择器匹配。

Content Editable div

下面的div元素不带有 contenteditable 属性，它们会被 :read-only 选择器匹配。

Regular div

浏览器支持

目前只有Chrome, Safari 和 Opera 14+ 以及 iOS支持 :read-only 伪类选择器。

Firefox浏览器需要添加 -moz- 前缀。

IE和Android不支持 :read-only 伪类选择器。

查看更多关于:read-only的详细内容...