:read-only

版本：CSS3

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

/* selects any  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属性的元素，它也会选择所有的不能被用户编辑的元素。

语法:

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

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

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

浏览器支持

例子

//HTML 
this is a normal paragraph.
you can edit this paragraph!
//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 
 姓名: 
 
 地址: 
//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;
}

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com