:read-only CSS sélecteur

Définition de la CSS :read-only.

La pseudo-classe CSS :read-only permet de cibler tous les éléments HTML :

acceptant l'attribut readonly et dont l'attribut readonly est spécifié.
acceptant l'attribut contenteditable et dont l'attribut contenteditable est spécifié à false ou non spécifié; et autre qu'INPUT et TEXTAREA.
Si document.designMode est égale à on l'attribut si spécifié contenteditable considéré comme égale à false.

Exemple de syntaxe CSS :read-only :

:read-only{
  /* Propriétés */
}
identifiant:read-only{
  /* Propriétés */
}

Exemple de code :read-only CSS

Conditions d'application de la CSS :read-only.

La pseudo-classe de feuille de style :read-only CSS ne peut pas se déclarer dans l'attribut HTML ou XHTML STYLE.
La pseudo-classe CSS :read-only doit être déclarée dans une balise HTML ou XHTML STYLE.

Problème d'interprétation de :read-only en Css.

La pseudo-classe CSS :read-write pause des problèmes sur Firefox qui inclue les type=radio et type=checkbox (02-2020).

Règles de syntaxes CSS pour :read-only.

Attention à l'écriture de :read-only

La pseudo-classe CSS :read-only s'applique sur différents types d'élément HTML ou XHTML acceptant l'attribut read-only. Vous pouvez donc si nécessaire mettre un sélecteur devant pour un ciblage plus précis, sinon les propriétés seront appliquées à l'ensemble des éléments HTML ou XHTML acceptant :read-only.

Dans le cas ci-dessous l'identifiant est collé à ":". Dans ce cas nous demandons d'appliquer les propriétés sur les éléments HTML ou XHTML qui ont "identifiant".

Code CSS :

.identifiant:read-only{ /* Propriétés css */ }
#identifiant:read-only{ /* Propriétés css */ }

Dans le cas ci-dessous l'identifiant est espacé de ":". Dans ce cas nous demandons d'appliquer les propriétés sur les éléments HTML ou XHTML dont le parent direct ou indirect est "identifiant".

Exemple de code :

.identifiant :read-only{ /* Propriétés css */ }
#identifiant :read-only{ /* Propriétés css */ }

Info complémentaire sur :read-only

Attention, la pseudo-classe CSS ":read-only" a une écriture un peu spéciale, "read-only" est toujours précédée de ":".

La pseudo-classe CSS :read-only ne peut pas être déclarée dans une balise HTML ou XHTML avec l'attribut HTML ou XHTML "STYLE" ou dans une feuille de style externe.
Elle se déclare dans une balise HTML ou XHTML "STYLE" de votre page :

Exemple d'écriture CSS :read-only dans une balise STYLE

<STYLE>
  input:read-only{}
</STYLE>

Compatibilités navigateurs du sélecteur :read-only

Détails des versions de la CSS :read-only: Sélecteur :read-only est compatible avec CSS4 et plus.

Résumé du support navigateurs de la CSS :read-only: Sélecteur CSS :read-only plus ou moins compatible à partir de Chrome 15; Sélecteur CSS :read-only est compatible sous une forme préfixée à partir de Firefox 3; Sélecteur CSS :read-only plus ou moins compatible à partir de Opera 11.5; Sélecteur CSS :read-only plus ou moins compatible à partir de Safari 4; Sélecteur CSS :read-only est compatible à partir de Chrome Android 80; Sélecteur CSS :read-only est compatible sous une forme préfixée à partir de Firefox Android 68; Sélecteur CSS :read-only plus ou moins compatible à partir de iOS Safari 4.2

Sélecteurs CSS préfixées de :read-only

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes au sélecteur :read-only CSS :

Pour faire fonctionner le sélecteur de feuille de style CSS :read-only sur Firefox :

Exemple de Css :read-only

.boxreadonly:-moz-read-only{
  /* Propriétés */
}
.boxreadonly:read-only{
  /* Propriétés */
}

Exemples et astuces CSS pour utiliser :read-only

readonly suivant la valeur de l'attribut type de INPUT

L'attribut readonly n'est pas accepté sur la balise HTML INPUT pour les valeurs de type suivante :

checkbox
radio
file
range
color
submit

L'attribut readonly est accepté pour les autres valeurs de type.

Votre avis sur la définition :read-only en CSS

Votez pour la définition CSS `:read-only`

Votes: 5 / 5 - 2 votes
Cliquez sur une étoile pour voter.