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