How to style readonly attribute with CSS?

Question

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

input[readonly] {
/*styling         


        

Answer 1

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

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"].

---

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

Answer 2

capitalize the first letter of Only

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

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

Answer 3

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: #ffffdffffd;
}

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

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

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

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

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

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