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

How to style readonly attribute with CSS?

提问by Daphne

I'm currently using readonly="readonly" to disable fields. I'm now trying to style the attribute using CSS. I've tried using

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

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

but it is not working for some reason. I've also tried

但由于某种原因它不起作用。我也试过

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

that doesn't work either.

那也不行。

How can I style the readonly attribute with CSS?

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

回答by Curt

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

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

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

回答by kaka

Note that textarea[readonly="readonly"]works if you set readonly="readonly"in HTML but it does NOT work if you set the readOnly-attribute to trueor "readonly"via JavaScript.

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

For the CSS selector to work if you set readOnlywith JavaScriptyou have to use the selector textarea[readonly].

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

Same behavior in Firefox 14 and Chrome 20.

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

To be on the safe side, i use both selectors.

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

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

回答by Luke

To be safe you may want to use both...

为了安全起见，您可能想同时使用两者...

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

The readonly attribute is a "boolean attribute", which can be either blank or "readonly" (the only valid values). http://www.whatwg.org/specs/web-apps/current-work/#boolean-attribute

readonly 属性是一个“布尔属性”，它可以是空白或“只读”（唯一的有效值）。http://www.whatwg.org/specs/web-apps/current-work/#boolean-attribute

If you are using something like jQuery's .prop('readonly', true)function, you'll end up needing [readonly], whereas if you are using .attr("readonly", "readonly")then you'll need [readonly="readonly"].

如果您使用的是 jQuery.prop('readonly', true)函数之类的东西，您最终将需要[readonly]，而如果您正在使用，.attr("readonly", "readonly")那么您将需要[readonly="readonly"].

---

---

Correction:You only need to use input[readonly]. Including input[readonly="readonly"]is redundant. See https://stackoverflow.com/a/19645203/1766230

更正：您只需要使用input[readonly]. 包括input[readonly="readonly"]是多余的。见https://stackoverflow.com/a/19645203/1766230

回答by IAmNaN

Loads of answers here, but haven't seen the one I use:

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

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

Note the dash in the pseudo selector. If the input is readonly="false"it'll catch that too since this selector catches the presence of readonly regardless of the value. Technically falseis invalid according to specs, but the internet is not a perfect world. If you need to cover that case, you can do this:

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

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

textareaworks the same way:

textarea工作方式相同：

textarea:read-only:not([read-only="false"]) { color: blue; }

Keep in mind that html now supports not only type="text", but a slew of other textual types such a number, tel, email, date, time, url, etc. Each would need to be added to the selector.

请记住，html 现在不仅支持type="text"，而且还支持大量其他文本类型，例如number, tel, email, date, time, url, 等。每个都需要添加到选择器中。

回答by Matthew Campbell

There are a few ways to do this.

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

The first is the most widely used. It works on all major browsers.

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

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

While the one above will select all inputs with readonlyattached, this one below will select only what you desire. Make sure to replace demowith whatever input type you want.

虽然上面的将选择所有带有readonly附加的输入，但下面的将仅选择您想要的。确保替换demo为您想要的任何输入类型。

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

This is an alternate to the first, but it's not used a whole lot:

这是第一个的替代，但它没有被大量使用：

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

The :read-onlyselector is supported in Chrome, Opera, and Safari. Firefox uses :-moz-read-only. IE doesn't support the :read-onlyselector.

该:read-only选择器在Chrome，Opera和Safari浏览器的支持。Firefox 使用:-moz-read-only. IE 不支持:read-only选择器。

You can also use input[readonly="readonly"], but this is pretty much the same as input[readonly], from my experience.

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

回答by Serge

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

Shoud cover all the casesfor a readonly input field...

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

回答by u8670799

capitalize the first letter of Only

将 Only 的第一个字母大写

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

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

回答by softwareplay

If you select the input by the id and then add the input[readonly="readonly"]tag in the css, something like:

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

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

That will not work. You have to select a parent class or id an then the input. Something like:

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

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

My 2 cents while waiting for new tickets at work :D

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

回答by Pal R

Use the following to work in all browsers:

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

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