如何使用CSS样式化只读属性？

Question

我目前正在使用 readonly="readonly" 来禁用字段。我现在想要使用 CSS 样式来美化该属性。我尝试过使用

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

但由于某些原因它并没有起作用。我也尝试了

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

那也不起作用。

我该如何使用CSS样式化readonly属性？

- Daphne

---

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

如果你想禁用它，那么请使用disabled属性而不是readonly。 - Sven Bieder

只读字段和禁用字段具有完全不同的行为。在表单提交时，只读字段会发送到服务器，而禁用字段则不会。 - Naren

只有当你使用类似于<input readonly="readonly">这样的HTML代码时，input[readonly='readonly']才能生效，而对于 <input readonly> 这样的代码是无法生效的。而 input[readonly] 则可以同时匹配这两种情况。 - Mathias Bynens

!important 应该可以覆盖，除非在设置类上也有 !important？ - Matt K

Answer 1

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

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

- Curtis

---

您应该使用 input[readonly]，因为 readonly 是一个布尔属性，并不设计为具有特定的值。 - BoltClock

@BoltClock 是的。请参见下面的答案中的解决方案。 - Pal R

我该如何使它可写？只需删除类样式吗？ - Renaro Santos

@RenaroSantos 这是一个HTML更改。从您的“input”元素中删除“readonly =” readonly“”。 - Curtis

不对应于片段，但现在更好了 ;) - serge

Answer 2

请注意，textarea[readonly="readonly"] 在 HTML 中设置 readonly="readonly" 时有效，但是如果通过 JavaScript 设置 readOnly 属性为 true 或 "readonly" 时无效。

为了使 CSS 选择器在使用 JavaScript 设置 readOnly 时有效，应该使用选择器 textarea[readonly]。

Firefox 14 和 Chrome 20 行为相同。

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

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

- kaka

---

你最好直接使用 textarea[readonly]，因为每个 textarea[readonly="readonly"] 都保证与它匹配。 - BoltClock

Answer 3

这里有很多答案，但是我使用的那个还没有出现：

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

请注意伪选择器中的破折号。如果输入是 readonly="false"，它也会被捕获，因为该选择器会捕获 readonly 的存在，而不管其值如何。从技术上讲，根据规范，false 是无效的，但互联网并不是完美的世界。如果您需要覆盖该情况，可以这样做：

[readonly][readonly!="true"]

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

- IAmNaN

---

我也不知道。哈哈，是的，你说得对！目前为止，:read-only和其他伪选择器已被添加到W3C标准中，并可与IE 10预览版10547及更高版本一起使用。 - IAmNaN

Answer 4

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

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://dev59.com/K2Ik5IYBdhLWcg3wDKNb#19645203。

- Luke

Answer 5

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

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

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]几乎相同。

- Matthew Campbell

Answer 6

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

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

- serge

---

输入：read-only是“可变性伪类，旨在基于禁用、只读和contenteditable HTML属性使表单样式更容易”。如此提到的，https://css-tricks.com/almanac/selectors/r/read-write-read/，各种实现都相当奇怪。 - peater

这很奇怪，但只有input[readonly]在FF 58中对我起作用。 - Pavel_K

Answer 7

将“Only”的首字母大写

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

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

- 王小陌

Answer 8

如果您通过id选择输入框，并在css中添加input[readonly="readonly"]标签，就像这样:

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

那样是行不通的。你需要选择一个父类或ID，然后再选择输入框。像这样：

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

在等待工作中的新票据时，我想提供我的两分建议:D

- softwareplay

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Quentin

啊，好的，你的意思是我需要输入类似于 input[readonly="readonly"]#inputID 这样的东西吗？/ 我真傻.. 你说得对。 - softwareplay

Answer 9

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

Use the following to work in all browsers:

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

- Pal R

---

所以，希望你的目标受众不在那2%中。 - Bacco

“locked”类包括什么？ - AdiT

$('.textBoxClass').addClass('locked') 将包含 'locked'。 - Pal R