如何使用CSS设置readonly属性？

Question

我目前正在使用readonly ="readonly"来禁用字段.我现在正在尝试使用CSS设置属性的样式.我试过用了

input[readonly] {
/*styling info here*/
}

但由于某种原因它不起作用.我也试过了

input[readonly='readonly'] {
/*styling info here*/
}

这也不起作用.

如何使用CSS设置readonly属性的样式？

Answer 1

input[readonly]
{
    background-color:blue;
}

https://curtistimson.co.uk/post/css/style-readonly-attribute-css/

Answer 2

请注意,textarea[readonly="readonly"]如果您readonly="readonly"在HTML中设置,但如果您将readOnly-attribute 设置为JavaScript true或"readonly"通过JavaScript 设置它不起作用,则它会起作用.

如果readOnly使用JavaScript 设置 CSS选择器,则必须使用选择器textarea[readonly].

Firefox 14和Chrome 20中的行为相同.

为了安全起见,我使用两个选择器.

textarea[readonly="readonly"], textarea[readonly] {
...
}

Answer 3

为了安全起见,你可能想要同时使用......

input[readonly], input[readonly="readonly"] {
    /*styling info here*/
}

readonly属性是一个"布尔属性",可以是空白或"只读"(唯一有效的值).http://www.whatwg.org/specs/web-apps/current-work/#boolean-attribute

如果你正在使用像jQuery的.prop('readonly', true)功能,你最终会需要[readonly],而如果你正在使用.attr("readonly", "readonly")那么你需要[readonly="readonly"].

更正: 您只需要使用input[readonly].包括input[readonly="readonly"]多余.请参阅/sf/answers/1375164241/

Answer 4

这里有大量的答案,但没有看到我使用的那个:

input[type="text"]:read-only { color: blue; }

请注意伪选择器中的破折号.如果输入readonly="false"它也会捕获它,因为无论值如何,此选择器都会捕获readonly的存在.从false规格来看,技术上是无效的,但互联网并不是一个完美的世界.如果你需要覆盖这种情况,你可以这样做:

input[type="text"]:read-only:not([read-only="false"]) { color: blue; }

textarea 以同样的方式工作:

textarea:read-only:not([read-only="false"]) { color: blue; }

请记住,HTML现在不仅支持type="text",但其他类型的文字这样的转换number,tel,email,date,time,url,等.每个需要被添加到选择.

Answer 5

有几种方法可以做到这一点.

第一种是使用最广泛的.它适用于所有主流浏览器.

input[readonly] {
 background-color: #dddddd;
}

虽然上面的一个将选择readonly附加的所有输入,下面这个将只选择你想要的.确保替换demo为您想要的任何输入类型.

input[type="demo"]:read-only {
 background-color: #dddddd;
}

这是第一个的替代品,但它并没有被大量使用:

input:read-only {
 background-color: #dddddd;
}

该:read-only选择器在Chrome,Opera和Safari浏览器的支持.Firefox使用:-moz-read-only.IE不支持:read-only选择器.

您也可以使用input[readonly="readonly"],但input[readonly]根据我的经验,这几乎是一样的.