Comment styler l'attribut readonly avec CSS?

Question

J'utilise actuellement readonly = "readonly" pour désactiver les champs. J'essaie maintenant de définir l'attribut en utilisant CSS. J'ai essayé d'utiliser

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

mais cela ne fonctionne pas pour une raison quelconque. J'ai aussi essayé

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

ça ne marche pas non plus.

Comment qualifier l'attribut readonly avec CSS?

Answer 1

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

http://jsfiddle.net/uzyH5/1/

Answer 2

Notez que textarea[readonly="readonly"] fonctionne si vous définissez readonly="readonly" en HTML mais ne fonctionne PAS si vous définissez readOnly --attribute sur true ou "readonly" via JavaScript.

Pour que le sélecteur CSS fonctionne si vous définissez readOnly avec JavaScript, vous devez utiliser le sélecteur textarea[readonly] .

Même comportement dans Firefox 14 et Chrome 20.

Pour être du bon côté, j'utilise les deux sélecteurs.

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

Answer 3

Pour être sûr que vous pouvez utiliser à la fois...

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

L'attribut lecture seule est un "attribut booléen", qui peut être soit vide ou "readonly" (les seules valeurs valides). http://www.whatwg.org/specs/web-apps/current-work/#boolean-attribute

Si vous utilisez quelque chose comme du jQuery .prop('readonly', true) de la fonction, vous allez finir par avoir besoin d' [readonly], tandis que si vous utilisez .attr("readonly", "readonly") , alors vous aurez besoin d' [readonly="readonly"].

---

Correction: Vous ne devez utiliser input[readonly]. Y compris input[readonly="readonly"] est redondante. Voir http://stackoverflow.com/a/19645203/1766230

Answer 4

Utilisez ce qui suit pour travailler dans tous les navigateurs:

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

Answer 5

Peut-être devriez-vous essayer DISABLE.

 input[type="text"]:disabled,
select:disabled,
textarea:disabled { color: #000; background-color: #ebebe4; }