Come definire l'attributo di sola lettura con CSS?

Attualmente sto usando readonly = "readonly" per disabilitare i campi. Ora sto provando a modellare l'attributo usando CSS. Ho provato ad usare

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

ma non funziona per qualche motivo. Ci ho anche provato

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

neanche quello funziona.

Come posso modellare l'attributo readonly con CSS?

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

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

Si noti che textarea[readonly="readonly"]funziona se si imposta readonly="readonly"in HTML ma NON funziona se si imposta readOnly-attribute su trueo "readonly"tramite JavaScript.

Perché il selettore CSS funzioni se si imposta readOnlycon JavaScript, è necessario utilizzare il selettore textarea[readonly].

Stesso comportamento in Firefox 14 e Chrome 20.

Per essere al sicuro, utilizzo entrambi i selettori.

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

Per sicurezza potresti voler usare entrambi ...

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

L'attributo readonly è un "attributo booleano", che può essere vuoto o "readonly" (gli unici valori validi). http://www.whatwg.org/specs/web-apps/current-work/#boolean-attribute

Se stai usando qualcosa come la .prop('readonly', true)funzione di jQuery , finirai per averne bisogno [readonly], mentre se lo stai usando .attr("readonly", "readonly")allora avrai bisogno [readonly="readonly"].

Correzione: devi solo usare input[readonly]. Incluso input[readonly="readonly"]è ridondante. Vedi https://stackoverflow.com/a/19645203/1766230

Un sacco di risposte qui, ma non ho visto quello che uso:

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

Nota il trattino nello pseudo-selettore. Se l'input è, readonly="false"lo prenderà anche perché questo selettore rileva la presenza di sola lettura indipendentemente dal valore. Tecnicamente falsenon è valido secondo le specifiche, ma Internet non è un mondo perfetto. Se hai bisogno di coprire quel caso, puoi farlo:

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

textarea funziona allo stesso modo:

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

Tenete a mente che l'HTML ora supporta non solo type="text", ma una sfilza di altri tipi testuali tale number, tel, email, date, time, url, ecc Ogni avrebbe bisogno di essere aggiunta al selettore.

Ci sono alcuni modi per farlo.

Il primo è il più utilizzato. Funziona su tutti i principali browser.

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

Mentre quello sopra selezionerà tutti gli ingressi con readonlyallegato, questo sotto selezionerà solo ciò che desideri. Assicurati di sostituire democon qualsiasi tipo di input desiderato.

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

Questa è un'alternativa alla prima, ma non è usata molto:

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

Il :read-onlyselettore è supportato in Chrome, Opera e Safari. Firefox utilizza :-moz-read-only. IE non supporta il :read-onlyselettore.

Puoi anche usare input[readonly="readonly"], ma questo è praticamente lo stesso input[readonly]della mia esperienza.

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

Shoud copre tutti i casi per un campo di input di sola lettura ...

scrivere in maiuscolo la prima lettera di Only

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

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

Se si seleziona l'input dall'id e quindi si aggiunge il input[readonly="readonly"]tag nel CSS, qualcosa di simile:

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

Non funzionerà. Devi selezionare una classe genitore o un id quindi l'input. Qualcosa di simile a:

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

I miei 2 centesimi in attesa di nuovi biglietti al lavoro: D

Utilizzare quanto segue per funzionare in tutti i browser:

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