:read-write
版本:CSS3
CSS伪类:read-write
代表一个元素(例如可输入文本的<input>
元素)可以被用户编辑。:read-write
选择器刚好与:read-only
选择器相反,主要用来指定当元素处于非只读状态时的样式。
语法:
E :read-write{sRules}
:read-write
选择器用于匹配可读及可写的元素。- 目前,在大多浏览器中,
:read-write
选择器只使用于设置了<input>
和<textarea>
元素。
/* 选择所有可编辑的 <input> 元素 */ /* firefox 中需要加前缀 */ input:-moz-read-write { background-color: #bbf; } /* supported in blink/webkit/edge without a prefix */ input:read-write { background-color: #bbf; }
注意:这个选择器不仅仅选择<input>
元素,它也会选择所有可以被用户编辑的元素,例如设置了contenteditable属性的<p>
元素。
浏览器支持
Firefox 和 IE不支持:read-write 选择器。Firefox 支持:-moz-read-write 选择器作为替代方案。Chrome, Safari 和 Opera浏览器支持:read-write |
例子
//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-write { background: cyan; } input:read-write { background: cyan; } p:-moz-read-write { background: lightgray; } p:read-write { background: lightgray; } p[contenteditable="true"] { color: blue; }
this is a normal paragraph.
you can edit this paragraph!
使用:read-write
选择器来设置非只读控件的文本框样式。
//HTML <form action="#"> <div> <label for="name">姓名:</label> <input type="text" name="name" id="name" placeholder="大漠" /> </div> <div> <label for="address">地址:</label> <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" /> </div> </form> //CSS form { width: 300px; padding: 10px; border: 1px solid #ccc; margin: 50px auto; } form > div { margin-bottom: 10px; } input[type="text"]{ border: 1px solid orange; padding: 5px; background: #fff; border-radius: 5px; } input[type="text"]:-moz-read-only{ border-color: #ccc; } input[type="text"]:read-only{ border-color: #ccc; } input[type="text"]:-moz-read-write{ border-color: #f36; } input[type="text"]:read-write{ border-color: #f36; }