• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • :read-only

    版本:CSS3

    CSS伪类:read-only表示元素不可被用户编辑的状态(如锁定的文本输入框)。用来指定处于只读状态元素的样式。简单点理解就是,元素中设置了readonly="readonly"

    /* selects any <input> element that is read-only */
    /* supported in firefox with a prefix */
    input:-moz-read-only {
      background-color: #ccc;
    }
    
    /* supported in blink/webkit/edge without a prefix */
    input:read-only {
      background-color: #ccc;
    }
    

    注意:这个选择器不只是选择具有readonly属性的<input>元素,它也会选择所有的不能被用户编辑的元素。

    语法:

    E:read-only{sRules}
    • :read-only选择器用于选取设置了"readonly"属性的元素。表单元素可以设置readonly属性来定义元素只读。
    • 目前,大多数浏览器,:read-only选择器适用于<input><textarea>元素,但是它也适用于设置了readonly属性的元素。

    read-only属性和disabled属性的区别?

    1、提交表单的时候read-only可以提交,但是disabled不可以。
    2、read-only只针对<input><textarea>这样的文本输入框,对<select>无效,disabled对所有表单元素有效。

    浏览器支持

    IE和火狐浏览器不支持:read-only。Firefox 支持:-moz-read-only选择器作为替代方案。 Chrome, Safari 和 Opera浏览器支持:read-only

    例子

    //HTML
    
    <input type="text" value="type whatever you want here.">
    <input type="text" value="this is a read-only field." readonly="readonly" />
    <p>this is a normal paragraph.</p>
    <p contenteditable="true">you can edit this paragraph!</p>
    
    //CSS
    
    input { min-width: 15em; }
    input:-moz-read-only { background: cyan; }
    input:read-only { background: cyan; }
    
    p:-moz-read-only { background: lightgray; }
    p:read-only { background: lightgray; }
    p[contenteditable="true"] { color: blue; }
    

    this is a normal paragraph.

    you can edit this paragraph!

    //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;
    }
    

    上篇::disabled

    下篇::read-write