Comment styliser l'attribut en lecture seule avec CSS?

J'utilise actuellement readonly = "readonly" pour désactiver les champs. J'essaye maintenant de styliser 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*/
}

cela ne fonctionne pas non plus.

Comment puis-je styliser l'attribut readonly avec CSS?

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

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

Notez que cela textarea[readonly="readonly"]fonctionne si vous définissez readonly="readonly"en HTML, mais cela ne fonctionne PAS si vous définissez l' readOnlyattribut sur trueou "readonly"via JavaScript.

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

Même comportement dans Firefox 14 et Chrome 20.

Pour être sûr, j'utilise les deux sélecteurs.

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

Pour être sûr, vous pouvez utiliser les deux ...

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

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

Si vous utilisez quelque chose comme la .prop('readonly', true)fonction de jQuery , vous en aurez besoin [readonly], alors que si vous utilisez, .attr("readonly", "readonly")vous en aurez besoin [readonly="readonly"].

Correction: il vous suffit d'utiliser input[readonly]. Y compris input[readonly="readonly"]est redondant. Voir https://stackoverflow.com/a/19645203/1766230

Des tas de réponses ici, mais je n'ai pas vu celle que j'utilise:

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

Notez le tiret dans le pseudo-sélecteur. Si l'entrée est, readonly="false"il l'attrapera aussi puisque ce sélecteur détecte la présence de lecture seule quelle que soit la valeur. Techniquement, il falsen'est pas valide selon les spécifications, mais Internet n'est pas un monde parfait. Si vous devez couvrir ce cas, vous pouvez le faire:

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

textarea fonctionne de la même manière:

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

Gardez à l' esprit que le HTML supporte désormais non seulement type="text", mais un grand nombre d'autres types de texte tel number, tel, email, date, time, url, etc. Chacun devrait être ajouté au sélecteur.

Il y a quelques façons de le faire.

Le premier est le plus utilisé. Cela fonctionne sur tous les principaux navigateurs.

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

Alors que celui ci-dessus sélectionnera toutes les entrées avec readonlyattaché, celui ci-dessous ne sélectionnera que ce que vous désirez. Assurez-vous de le remplacer demopar le type d'entrée souhaité.

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

Ceci est une alternative au premier, mais il n'est pas beaucoup utilisé:

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

Le :read-onlysélecteur est pris en charge dans Chrome, Opera et Safari. Firefox utilise :-moz-read-only. IE ne prend pas en charge le :read-onlysélecteur.

Vous pouvez également utiliser input[readonly="readonly"], mais c'est à peu près la même chose que input[readonly], d'après mon expérience.

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

Shoud couvrir tous les cas pour un champ de saisie en lecture seule ...

mettre en majuscule la première lettre de Only

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

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

Si vous sélectionnez l'entrée par l'ID, puis ajoutez la input[readonly="readonly"]balise dans le css, quelque chose comme:

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

Ça ne marchera pas. Vous devez sélectionner une classe parente ou un identifiant puis l'entrée. Quelque chose comme:

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

Mes 2 cents en attendant de nouveaux billets au travail: D

Utilisez ce qui suit pour travailler dans tous les navigateurs:

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