如何使用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

请注意，如果您在HTML中设置textarea[readonly="readonly"]，则readonly="readonly"可以正常工作，但如果您通过JavaScript将readOnly属性设置为true或"readonly"则不起作用。

要使CSS选择器工作，如果使用JavaScript设置readOnly，则必须使用选择器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 qazxsw poi函数这样的东西，你最终需要qazxsw poi，而如果你使用.prop('readonly', true)那么你将需要[readonly]。

---

更正：您只需要使用.attr("readonly", "readonly")。包括[readonly="readonly"]是多余的。见input[readonly]

Answer 4

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

input[readonly="readonly"]

请注意伪选择器中的破折号。如果输入是https://stackoverflow.com/a/19645203/1766230，那么它也会捕获它，因为无论值如何，这个选择器都会捕获readonly的存在。从技术上讲，input[type="text"]:read-only { color: blue; } 根据规格无效，但互联网不是一个完美的世界。如果你需要覆盖这种情况，你可以这样做：

readonly="false"

false以同样的方式工作：

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

请记住，html现在不仅支持textarea，还支持一系列其他文本类型，例如textarea:read-only:not([read-only="false"]) { color: blue; } ，type="text"，number，tel，email，date等。每个都需要添加到选择器中。

Answer 5

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

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

time

虽然上面的一个将选择附加url的所有输入，但下面这个将只选择你想要的。确保将

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

替换为您想要的任何输入类型。

readonly

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

demo

Chrome，Opera和Safari支持

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

选择器。 Firefox使用

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

。 IE不支持:read-only选择器。

您也可以使用:-moz-read-only，但根据我的经验，这与:read-only几乎相同。

Answer 6

input[readonly="readonly"]

应该涵盖只读输入字段的所有情况......

Answer 7

如果您通过id选择输入，然后在css中添加input[readonly]标记，例如：

input[readonly], input:read-only {
    /* styling info here */
}

那样不行。您必须选择父类或id然后输入。就像是：

input[readonly="readonly"]

在等待工作新票时我2美分：D

Answer 8

使用以下命令在所有浏览器中工作：

 #inputID input[readonly="readonly"] {
     background-color: #000000;
 }

Answer 9

将只有的第一个字母大写

 .parentClass, #parentID input[readonly="readonly"] {
     background-color: #000000;
 }

 var readOnlyAttr = $('.textBoxClass').attr('readonly');
    if (typeof readOnlyAttr !== 'undefined' && readOnlyAttr !== false) {
        $('.textBoxClass').addClass('locked');
    }