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

Posted 2023-03-06

【中文标题】如何使用 CSS 设置只读属性的样式？

【英文标题】：How to style readonly attribute with CSS?

【发布时间】：2012-03-26 23:26:42

【问题描述】：

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

input[readonly] 
  /* styling info here */

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

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

这也不行。

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

【问题讨论】：

input[readonly] 应该可以工作。确保它没有被样式表中其他更具体的选择器覆盖。

如果要禁用，则使用 disabled 属性而不是只读属性

@SvenBieder Readonly 和 disabled 完全不同。表单提交时发送到服务器的只读字段，而禁用字段则不发送。

input[readonly='readonly'] 仅在您使用像 <input readonly="readonly"> 这样的 html 时才有效，而不是例如<input readonly>。 input[readonly] 应该两者都匹配。

!important 应该可以覆盖，除非您在设置类中也有 !important？

【参考方案1】：

input[readonly]

    background-color:blue;

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

【讨论】：

您应该改用input[readonly]，因为readonly 是一个布尔属性，并非旨在具有特定值。

@BoltClock 是的。请在下面的答案中查看解决方案。

我怎样才能让它再次可写？只是删除类样式？

@RenaroSantos 那是 HTML 更改。从 input 元素中删除 readonly="readonly"。

w/ IE7 你仍然可以在 jQuery 中使用选择器

【参考方案2】：

请注意，如果您在 HTML 中设置 readonly="readonly"，textarea[readonly="readonly"] 有效，但如果您通过 javascript 将 readOnly 属性设置为 true 或 "readonly"，则它不起作用。

要使 CSS 选择器工作如果您使用 JavaScript 设置 readOnly，您必须使用选择器 textarea[readonly]。

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

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

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

【讨论】：

你也可以只使用textarea[readonly] - 每个textarea[readonly="readonly"] 都保证匹配。

【参考方案3】：

为了安全起见，您可能希望同时使用这两个...

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://***.com/a/19645203/1766230

【参考方案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 等. 每个都需要添加到选择器中。

【讨论】：

我也没有。大声笑是的，你是对的！目前。 :read-only 和其他伪选择器已添加到 W3C 标准中，可与 IE 10 预览版 10547 及更高版本一起使用。

【参考方案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] 几乎相同。

【参考方案6】：

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

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

【讨论】：

input:read-only 是“可变性伪类，旨在使表单样式更容易基于禁用、只读和可内容编辑的 HTML 属性”正如这里提到的 css-tricks.com/almanac/selectors/r/read-write-read，各种实现都非常不稳定。

这很奇怪，但只有 input[readonly] 在 FF 58 中对我有用

【参考方案7】：

Only 的首字母大写

input[readOnly] 
      background: red !important;
    

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

【参考方案8】：

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

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

那是行不通的。您必须选择一个父类或 id 然后输入。比如：

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

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

【讨论】：

“如果你通过 id 选择输入”——OP 不是，那么这有什么关系呢？即使是这样，你也错了，你只需要删除后代组合器。

嗯，你的意思是我必须输入类似 input[readonly="readonly"]#inputID 的东西？ /我傻瓜..你是对的

【参考方案9】：

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

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

【讨论】：

所以，希望你的目标受众不在这 2% 之内。

什么包括类“锁定”？？

$('.textBoxClass').addClass('locked') 将包括 'locked'