Comment style attribut lecture seule avec CSS?

Je suis actuellement à l'aide readonly="readonly" pour désactiver les champs. Je vais maintenant essayer de style, l'attribut à l'aide de CSS. J'ai essayé d'utiliser

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

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

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

ne marche pas non plus.

Comment puis-je style de l'attribut lecture seule avec CSS?

  • input[readonly] devrait fonctionner. Assurez-vous qu'il n'est pas être remplacées par d'autres, plus spécifiques des sélecteurs d'ailleurs dans votre feuille de style.
  • si vous souhaitez désactiver, puis utilisez le désactivé attribut et non en lecture seule
  • J'ai remarqué que vous manquez une apostrophe dans la deuxième sélecteur. Doit être entrée[readonly='readonly'] et il fonctionnera aussi bien comme entrée[readonly].
  • Readonly et les handicapés ont des comportements différents au total. Readonly champs envoyé au serveur sur le formulaire de soumission lors d'une invalidité les champs ne sont pas.
  • input[readonly='readonly'] ne fonctionnera que si vous utilisez le code HTML comme <input readonly="readonly">, pas pour, par exemple,<input readonly>. input[readonly] doit correspondre à la fois.
  • juste un avis, IE6/7 ne prend pas en charge cet attribut sélecteur seule IE8+
  • K: IE7 est bien avec sélecteur d'attribut pour des choses comme les readonly. Il ne bousille dans certains cas particuliers (par exemple, obtenir des DOM des propriétés et attributs HTML mélangé).
  • désolé, attaché à ce commentaire à la mauvaise partie. Curt réponse ci-dessous ne fonctionne pas dans IE6/7. il ne reconnaît pas input[readonly="readonly"], il doit être seulement input[readonly].
  • Ouais, je sais, ça ne fonctionne pas de la même comme un handicapé. J'ai pour l'utilisation en lecture seule car je veux que le formulaire pour soumettre les mêmes valeurs, mais aussi d'empêcher les utilisateurs de modifier le champ. J'ai utilisé jQuery pour empêcher la lecture seule de la valeur de la focalisation donc, c'est comme désactivé, mais vous pouvez soumettre des valeurs.
  • Désolé, c'était une faute de frappe. J'ai l'apostrophe dans le deuxième sélecteur. Ont modifié la question de la description.
  • Je pense que cela pourrait être la raison. J'utilise class="setting" pour modifier les paramètres des champs dans le formulaire pour le rendre différent de la normale de la valeur d'entrée. J'ai juste essayé d'utiliser !important à côté de la lecture-seule classe dans la tentative de hiérarchiser la lecture-seule classe, mais ça ne fonctionne pas. Comment peut-on avoir à la fois les paramètres de la classe et de la lecture-seule classe actuelle étant donné que seuls certains champs sont en lecture seule et ne peut pas utiliser en lecture seule pour tous les champs.
  • !important devrait fonctionner à remplacer, sauf si vous avez également !important sur le paramètre de la classe?
  • oh, ok, alors 🙂 ce que les styles exactement vous êtes en essayant de l'appliquer? pas chaque élément de support de chaque attribut css...
  • Hmm, non je n'ai pas !important sur les paramètres de la classe. Mon code est comme suit: input[readonly] !important { color: red; } input.setting { font-family: Verdana, Helvetica, sans-serif; font-size: 11px; color: #676563; background: #d5cec5; border: 0px; margin: 3px; padding: 8px; height: 18px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } input:focus.setting { color: #555; background-color: #f5f1eb; }
  • Pourriez-vous modifier que dans votre question, s'il vous plaît? Je remarque aussi un errant !important après votre sélecteur - était-ce une erreur dans votre commentaire?
  • Vous pouvez cibler sélecteur d'attribut dans ie8 si le doctype est HTML5. caniuse.com

InformationsquelleAutor Daphne | 2012-03-09
  1. 198
    input[readonly]
{
    background-color:blue;
}

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

    • Vous devez utiliser input[readonly] plutôt que readonly est un attribut Booléen qui n'est pas conçu pour avoir une valeur spécifique.
    • Oui. Veuillez voir la résolution dans la Réponse ci-dessous.
    • Comment puis-je le rendre accessible en écriture à nouveau? Juste en retrait de la classe de style?
    • C'est un HTML changement. Supprimer readonly="readonly" de votre input élément.
    • w/ IE7, vous pouvez toujours utiliser le sélecteur jQuery
    • peut-être de corriger la réponse en fonction de l' @BoltClock commentaire (pour pleople qui n'a pas de visiter le lien ci-dessous)?
    • De réponses mis à jour
    • ne correspont à l'extrait de code, mais c'est mieux maintenant 😉
    • Ha vrai, mis à jour que trop.
    • enfin, la réponse est identique à la question! 😉
    • J'ai essayé toutes les solutions possibles et aucun d'eux ne fonctionne sur iOS 🙁 plus précisément, je voulais régler la couleur de la propriété, qui est par défaut une nuance de gris clair. edit de mon précédent commentaire, il fonctionne en fait sur iOS, mais la couleur est estompé un peu, donc la couleur du texte n'est pas obtenir la couleur exacte définie dans le CSS.

    InformationsquelleAutor Curt
  2. 69

    Noter que textarea[readonly="readonly"] fonctionne si vous définissez readonly="readonly" en HTML, mais il ne fonctionne PAS si vous définissez la readOnly-attribut true ou "readonly" via JavaScript.

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

    Même comportement dans Firefox 14 et Chrome 20.

    Pour être sur le côté sûr, j'utilise les deux sélecteurs.

    textarea[readonly="readonly"], textarea[readonly] {
...
}
    • Vous pouvez tout aussi bien utiliser textarea[readonly] au lieu - chaque textarea[readonly="readonly"] est garanti pour correspondre à ce que.
    InformationsquelleAutor kaka
  3. 22

    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) fonction, vous allez finir par avoir besoin [readonly], tandis que si vous utilisez .attr("readonly", "readonly") ensuite, vous aurez besoin [readonly="readonly"].

    Correction:
    Vous avez seulement besoin d'utiliser input[readonly]. Y compris input[readonly="readonly"] est redondante. Voir https://stackoverflow.com/a/19645203/1766230

    InformationsquelleAutor Luke
  4. 20

    Une foule de réponses ici, mais je n'ai pas vu celui que j'utilise:

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

    Remarque le tableau de bord dans le pseudo-sélecteur. Si l'entrée est readonly="false" il va prendre que trop depuis ce sélecteur captures de la présence de lecture-seule, indépendamment de la valeur. Techniquement false est pas valide selon les specs, mais l'internet n'est pas un monde parfait. Si vous avez besoin pour 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 html prend désormais en charge non seulement type="text", mais une flopée d'autres types textuels tels un number, tel, email, date, time, url, etc. Chacun aurait besoin d'être ajouté à la sélection.

    • Un gentil @IAmNaN
    • Il ne fonctionne pas sur IE.
    • Ni moi LOL Oui, vous avez raison! Pour l'instant. :read-only et autres pseudo boutons ont été ajoutés à la norme du W3C et peut être utilisé avec IE 10 preview builds 10547 et plus.
    InformationsquelleAutor IAmNaN
  5. 6

    Il ya quelques façons de le faire.

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

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

    Tandis que l'un au-dessus de sélectionner toutes les entrées avec readonly jointe, celle-ci permettra de sélectionner uniquement ce que vous désirez. Assurez-vous de remplacer demo avec ce type d'entrée que vous voulez.

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

    C'est un substitut pour le premier, mais il n'est pas utilisé tout un tas:

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

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

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

    • Merci pour ce -> Firefox utilise :-moz-en lecture seule.
    • Vous êtes le bienvenu.
    InformationsquelleAutor Matthew Campbell
  6. 4
    input[readonly], input:read-only {
    /* styling info here */
}

    Devraient couvrir tous les cas pour un readonly champ de saisie...

    • Quand est input:read-only utilisé? N'a jamais vu ça avant.
    • entrée:lecture seule est la "mutabilité pseudo-classe visant à rendre la forme de coiffage plus facile basée sur désactivé, readonly et contenteditable Attributs HTML" Comme indiqué ici, css-tricks.com/almanac/selectors/r/read-write-read, les différentes implémentations sont assez bancale.
    • C'est étrange, mais seulement de l'entrée[readonly] a travaillé pour moi dans FF 58
    InformationsquelleAutor Serge
  7. 2

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

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

    Qui ne fonctionnera pas. Vous devez sélectionner un parent de la classe ou un id de l'entrée. Quelque chose comme:

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

    Mes 2 cents, tandis que d'attente pour de nouveaux billets au travail 😀

    • "Si vous sélectionnez l'entrée de l'id" – que l'OP n'est pas, alors, comment est-ce pertinent? Même si c'était le cas, vous avez tort, vous avez juste besoin de supprimer le descendant du combinator.
    • AH ok, tu veux dire que je dois écrire quelque chose comme entrée[readonly="readonly"]#inputID ? /me tromper.. vous avez raison
    InformationsquelleAutor softwareplay
  8. 1

    Utiliser les éléments suivants pour fonctionner dans tous les navigateurs:

     var readOnlyAttr = $('.textBoxClass').attr('readonly');
    if (typeof readOnlyAttr !== 'undefined' && readOnlyAttr !== false) {
        $('.textBoxClass').addClass('locked');
    }
    • Sauf si JavaScript est désactivé...
    • 98% du temps de ses pas.
    • Donc, j'espère que votre public cible n'est pas que de 2%.
    • Ce qui comprend la classe "verrouillé"??
    • $('.textBoxClass').addClass ("verrouillé") comprendra "verrouillé"
    InformationsquelleAutor Pal R
  9. 1

    en majuscule la première lettre de Seulement

    CSS:

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

    HTML:

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

    InformationsquelleAutor 王小陌