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

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.