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"]如果您在HTML中设置readonly="readonly"，但如果您将readOnly - 属性设置为true或"readonly"，则readOnly无效的JavaScript。

要使CSS选择器工作，如果您使用JavaScript设置textarea[readonly] ，则必须使用选择器textarea[readonly="readonly"], textarea[readonly] { ... }。

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

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

{{1}}

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"]是多余的。见https://stackoverflow.com/a/19645203/1766230

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

Chrome，Opera和Safari支持:read-only选择器。 Firefox使用:-moz-read-only。 IE不支持:read-only选择器。

您也可以使用input[readonly="readonly"]，但根据我的经验，这与input[readonly]几乎相同。

Answer 6

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

为只读输入字段覆盖所有案例 ......

Answer 7

如果您按ID选择输入，然后在css中添加input[readonly="readonly"]标记，例如：

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

那不行。您必须选择父类或id然后输入。类似的东西：

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

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

Answer 8

使用以下方法在所有浏览器中使用：

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

Answer 9

将Only的首字母大写

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

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

如何使用CSS设置readonly属性？

9 个答案: