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

语法:

E:read-only{sRules}

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

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

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

浏览器支持

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

例子

//HTML

this is a normal paragraph.

you can edit this paragraph!

//CSSinput { 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!

.demo1 input{margin:10px 15px 10px 0;min-width: 15em;}.demo1 input:-moz-read-only{background: cyan;}.demo1 input:read-only{background: cyan;}.demo1 p:-moz-read-only{background: lightgray;}.demo1 p:read-only{background: lightgray;}.demo1 p[contenteditable="true"]{color: blue;}