web-dev-qa-db-fra.com

Comment styler l'attribut readonly avec CSS?

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?

htmlcsscss-selectors
146
Daphne
input[readonly]
{
    background-color:blue;
}

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

202
Curt

Notez que textarea[readonly="readonly"] fonctionne si vous définissez readonly="readonly" en HTML, mais PAS si vous définissez l'attribut readOnly- à 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] {
...
}
69
kaka

Pour être en sécurité, vous voudrez peut-être 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 fonction .prop('readonly', true) de jQuery, vous aurez besoin de [readonly], tandis que si vous utilisez .attr("readonly", "readonly"), vous aurez besoin de [readonly="readonly"].

Correction: Il vous suffit d'utiliser input[readonly]. Inclure input[readonly="readonly"] est redondant. Voir https://stackoverflow.com/a/19645203/17662

22
Luke

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", elle le détectera également, car ce sélecteur détecte la présence en lecture seule, quelle que soit la valeur. Techniquement, false n'est pas valide selon les spécifications, mais Internet n'est pas un monde parfait. Si vous avez besoin de 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; }

N'oubliez pas que le langage HTML prend désormais en charge non seulement type="text", mais également une multitude d'autres types de texte tels que number, tel, email, date, time, url, etc. Chacun doit être ajouté au sélecteur.

20
IAmNaN

Il y a quelques façons de le faire.

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

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

Alors que celle ci-dessus sélectionnera toutes les entrées avec readonly attachée, celle-ci ci-dessous ne sélectionnera que ce que vous désirez. Assurez-vous de remplacer demo par le type d’entrée de votre choix.

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

Ceci est une alternative à la première, mais il n’est pas utilisé beaucoup:

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

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

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.

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

Shoud cover tous les cas pour un champ en lecture seule ...

4
Serge

Si vous sélectionnez l'entrée à l'aide de l'id, puis ajoutez la balise input[readonly="readonly"] dans le fichier css, comme suit:

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

Ça ne marchera pas. Vous devez sélectionner une classe ou un identifiant parent, 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

2
softwareplay

Utilisez ce qui suit pour travailler dans tous les navigateurs:

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

majuscule la première lettre de Only

input[readOnly] {
      background: red !important;
    }
<input type="text" name="country" value="China" readonly="readonly" />
1
王小陌