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