:read-write | CSS属性参考

09-21 次

标签 css教程 css属性伪类选择器

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

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

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

:read-write伪类选择器可以匹配上面列出的所有元素。

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

<input type="text">

<input type="number">

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

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

下面的元素不能被:read-write伪类选择器选择：

<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规则。

.element:read-write:after {
    content: "ok!";
    /* ... */
}

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

input:read-write:focus, textarea:read-write:focus {
    box-shadow: 0 0 3px 1px rgba(0, 0, 100, .2);
}