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

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