如何风格只读属性与CSS？

我目前使用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中设置了readonly="readonly" ， textarea[readonly="readonly"]起作用，但如果通过JavaScript将readOnly attribute设置为true或"readonly" ，则不起作用。

如果你设置readOnly与JavaScript的CSSselect器工作，你必须使用select器textarea[readonly] 。

在Firefox 14和Chrome 20中也是如此。

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

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

Answer 4

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

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

注意伪select器中的短划线。 如果input是readonly="false"它也会捕获，因为这个select器捕获只读的存在，而不pipe值是多less。 技术上的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" ，还支持其他文本types，如number ， tel ， email ， date ， time ， url等。每个都需要添加到select器中。

Answer 5

如果您通过idselectinput，然后在css中添加input[readonly="readonly"]标记，如下所示：

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

这是行不通的。 你必须select一个父类或ID然后input。 就像是：

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

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

Answer 6

使用以下内容在所有浏览器中工作：

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

Answer 7

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

应该涵盖了只读input字段的所有情况 。

Answer 8

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

第一个是使用最广泛的。

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

虽然上面的代码将只select所有的input，但只会select所需的input。 确保用任何你想要的typesreplacedemo 。

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

这不是用了很多：

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

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

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

Answer 9

也许你应该尝试禁用。

 input[type="text"]:disabled, select:disabled, textarea:disabled { color: #000; background-color: #ebebe4; }