• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • :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;
    }
    

    上篇::read-only

    下篇::optional