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

我目前正在使用readonly =“ readonly”来禁用字段。我现在正尝试使用CSS设置属性样式。我尝试使用

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

但由于某种原因，它无法正常工作。我也尝试过

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

那也不起作用。

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

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

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

请注意，textarea[readonly="readonly"]如果readonly="readonly"在HTML中进行设置，则该方法有效，但如果将readOnly-attribute 设置为true或，则该方法无效"readonly" JavaScript通过JavaScript进行。

为了使CSS选择器能够正常工作（如果您readOnly使用JavaScript进行设置），则必须使用选择器textarea[readonly]。

在Firefox 14和Chrome 20中具有相同的行为。

为了安全起见，我同时使用了两个选择器。

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

为了安全起见，您可能需要同时使用...

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

readonly属性是一个“布尔属性”，可以为空或“ 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"]是多余的。参见https://stackoverflow.com/a/19645203/1766230

这里有很多答案，但还没有看到我使用的答案：

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要添加到选择等。每个需要。

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

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

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]根据我的经验，这几乎与相同。

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

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

将Only的首字母大写

input[readOnly] {
      background: red !important;
    }

<input type="text" name="country" value="China" readonly="readonly" />

如果您通过ID选择输入，然后input[readonly="readonly"]在CSS中添加标签，则类似于：

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

那不管用。您必须先选择一个父类或ID，然后再输入。就像是：

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

我在等待新票上班时的2美分：D

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

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