网站地图    收藏   

主页 > 专题教程 > css >

:read-write

来源:自学PHP网    时间:2018-02-08 10:48 作者: 阅读:

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

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);
}
在线演示

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

下面的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-write伪类选择器。

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

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

最新评论

添加评论

更多文章推荐

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论