¿Cómo dar estilo al atributo de solo lectura con CSS?

Actualmente estoy usando readonly = "readonly" para deshabilitar los campos. Ahora estoy tratando de diseñar el atributo usando CSS. He intentado usar

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

pero no funciona por alguna razón. También he intentado

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

eso tampoco funciona.

¿Cómo puedo diseñar el atributo de solo lectura con CSS?

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

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

Tenga en cuenta que textarea[readonly="readonly"]las obras si se establece readonly="readonly"en HTML pero no funciona si se establece la readOnly-attribute a trueo "readonly"a través de JavaScript.

Para que el selector CSS funcione si configura readOnlycon JavaScript , debe usar el selector textarea[readonly].

Mismo comportamiento en Firefox 14 y Chrome 20.

Para estar seguro, utilizo ambos selectores.

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

Para estar seguro, es posible que desee utilizar ambos ...

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

El atributo de solo lectura es un "atributo booleano", que puede estar en blanco o "de solo lectura" (los únicos valores válidos). http://www.whatwg.org/specs/web-apps/current-work/#boolean-attribute

Si está utilizando algo como la .prop('readonly', true)función de jQuery , terminará necesitando [readonly], mientras que si lo está utilizando .attr("readonly", "readonly"), lo necesitará [readonly="readonly"].

Corrección: solo necesitas usar input[readonly]. La inclusión input[readonly="readonly"]es redundante. Ver https://stackoverflow.com/a/19645203/1766230

Hay muchas respuestas aquí, pero no he visto la que uso:

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

Tenga en cuenta el guión en el pseudo selector. Si la entrada es, readonly="false"también lo captará, ya que este selector detecta la presencia de solo lectura, independientemente del valor. Técnicamente falseno es válido según las especificaciones, pero Internet no es un mundo perfecto. Si necesita cubrir ese caso, puede hacer esto:

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

textarea funciona de la misma manera:

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

Tenga en cuenta que ahora es compatible con HTML no sólo type="text", sino una serie de otros tipos textuales tal number, tel, email, date, time, url, etc. Cada uno tendría que ser añadido al selector.

Hay algunas formas de hacer esto.

El primero es el más utilizado. Funciona en todos los principales navegadores.

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

Mientras que el de arriba seleccionará todas las entradas con readonlyadjunto, este de abajo seleccionará solo lo que desee. Asegúrese de reemplazar democon cualquier tipo de entrada que desee.

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

Esta es una alternativa a la primera, pero no se usa mucho:

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

El :read-onlyselector es compatible con Chrome, Opera y Safari. Firefox utiliza :-moz-read-only. IE no es compatible con el :read-onlyselector.

También puede usar input[readonly="readonly"], pero esto es más o menos lo mismo input[readonly], según mi experiencia.

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

Debería cubrir todos los casos para un campo de entrada de solo lectura ...

escribe con mayúscula la primera letra de Only

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

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

Si selecciona la entrada por la identificación y luego agrega la input[readonly="readonly"]etiqueta en el CSS, algo así como:

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

Eso no funcionará. Debe seleccionar una clase o identificación principal y luego la entrada. Algo como:

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

Mis 2 centavos mientras espero nuevas entradas en el trabajo: D

Use lo siguiente para trabajar en todos los navegadores:

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