Como estilizar o atributo readonly com CSS?

Atualmente, estou usando readonly = "readonly" para desativar os campos. Agora estou tentando estilizar o atributo usando CSS. Eu tentei usar

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

mas não está funcionando por algum motivo. Eu também tentei

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

isso também não funciona.

Como posso estilizar o atributo readonly com CSS?

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

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

Observe que textarea[readonly="readonly"]funciona se você definir readonly="readonly"em HTML, mas NÃO funciona se você definir o readOnlyatributo-para trueou"readonly" via JavaScript.

Para que o seletor CSS funcione, se você definir readOnlycom JavaScript, precisará usar o seletortextarea[readonly] .

Mesmo comportamento no Firefox 14 e Chrome 20.

Para estar do lado seguro, eu uso os dois seletores.

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

Para estar seguro, você pode usar os dois ...

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

O atributo readonly é um "atributo booleano", que pode estar em branco ou "readonly" (os únicos valores válidos). http://www.whatwg.org/specs/web-apps/current-work/#boolean-attribute

Se você estiver usando algo como a .prop('readonly', true)função do jQuery , acabará precisando [readonly], enquanto que se estiver usando .attr("readonly", "readonly"), precisará [readonly="readonly"].

Correção: Você só precisa usar input[readonly]. Incluir input[readonly="readonly"]é redundante. Consulte https://stackoverflow.com/a/19645203/1766230

Cargas de respostas aqui, mas ainda não vi a que eu uso:

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

Observe o traço no pseudo-seletor. Se a entrada for, readonly="false"também será detectada, pois esse seletor captura a presença de somente leitura, independentemente do valor. Tecnicamente, falseé inválido de acordo com as especificações, mas a internet não é um mundo perfeito. Se precisar cobrir esse caso, você pode fazer o seguinte:

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

textarea funciona da mesma maneira:

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

Tenha em mente que html agora suporta não só type="text", mas uma série de outros tipos textuais como um number, tel, email, date, time, url, etc. Cada precisaria ser adicionado ao seletor.

Há algumas maneiras de fazer isto.

O primeiro é o mais utilizado. Funciona em todos os principais navegadores.

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

Enquanto o item acima selecionará todas as entradas readonlyanexadas, este abaixo selecionará apenas o que você deseja. Substitua demopor qualquer tipo de entrada desejado.

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

Esta é uma alternativa à primeira, mas não é muito usada:

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

O :read-onlyseletor é suportado no Chrome, Opera e Safari. O Firefox usa :-moz-read-only. O IE não suporta o :read-onlyseletor.

Você também pode usar input[readonly="readonly"], mas isso é praticamente o mesmo que input[readonly], pela minha experiência.

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

Deverá cobrir todos os casos para um campo de entrada somente leitura ...

colocar em maiúscula a primeira letra de Only

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

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

Se você selecionar a entrada pelo id e adicionar a input[readonly="readonly"]tag no css, algo como:

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

Isso não vai funcionar. Você precisa selecionar uma classe ou identificação pai e, em seguida, a entrada. Algo como:

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

Meus 2 centavos enquanto aguarda novos ingressos no trabalho: D

Use o seguinte para trabalhar em todos os navegadores:

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