Les pseudo-classes :read-only et :read-write.
Résumé des caractéristiques du sélecteur :read-only
Description des pseudo-classes :read-only et :read-write.
Ces deux pseudo-classes permettent de distinguer les éléments en lecture seule des éléments éditables, c'est à dire ceux dont l'utilisateur peut modifier le texte. Ces pseudo-classes ne s'appliquent donc pas forcément à des zones de saisi puisque HTML5 permet de rendre éditable n'importe quel élément contenant du texte.
Les balises input contenant du texte (types text, number, email, etc.)
et les balises textarea sont par défaut éditables.
Elle peuvent être verrouillées avec l'attribut readonly="true".
D'autres balises input comme celles de type checkbox ou radio ne sont pas éditables
(elles ne comportent de toute façon pas de contenu textuel).
Les autres éléments comme de simples paragraphes (balises p), par défaut non éditables, peuvent être rendus éditables
avec l'attribut contenteditable="true".
Exemple sur des zones de saisie.
L'exemple ci-dessous illustre une utilisation classique de ces pseudo-classes, sur des zones de saisie de type text,
number ou date.
Celles qui sont éditables sont encadrées en vert, tandis que celles qui sont verrouillées sont encadrées en rouge.
On constate que les cases à cocher et les boutons radio sont toujours assimilés à des éléments non éditables, bien qu'ils soient actifs et modifiables par l'utilisateur.
En déplaçant la souris sur les éléments, vous affichez le code HTML (lorsque celui-ci est intéressant).
| Identifiant : | |
| Nom : | |
| Adhérent : | |
| Statut : | Mineur Majeur Retraité |
| Date de naissance : | |
| Date d'inscription : | |
| Remarque : | |
| Horaires d'ouverture : |
Exemple sur d'autres éléments que des zones de saisie.
Le tableau ci-dessous comporte certaines cellules éditables. Elles ont un fond légèrement teinté. Celles qui ne sont pas éditables ont un fond blanc (la couleur par défaut).
| Activités sportives | |
|---|---|
| Lundi | Piscine |
| Mardi | Footing |
| Mercredi | |
| Jeudi | |
| Vendredi | Tennis |
| Week-end | Libre |
Compatibilité et prise en charge par les navigateurs.
Les deux sélecteurs par pseudo-classe :read-only et :read-write ne posent aucun problème de compatibilité avec
les navigateurs actuels.
:read-ony
:read-write Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi...
De nombreuses pseudo-classes sont relatives aux zones de saisie ou à leur état à un moment donné (activées, cochées, etc.) La liste ci-après vous permet d'accéder rapidement à leur description.
:autofill: Pseudo-classe désignant les éléments de saisie dont le contenu a été renseigné automatiquement par le navigateur.:blank: Pseudo classe désignant les zones de saisie vides.:checked: Pseudo-classe désignant les cases à cocher (ou boutons radio) qui sont cochés, ainsi que les éléments de menu sélectionnés.:default: Pseudo-classe désignant les cases à cocher et boutons radio qui sont cochés par défaut.:disabled: Pseudo-classe désignant les zones de saisie veerrouillées.:enabled: Pseudo-classe désignant les zones de saisies non verrouillées.:indeterminate: Pseudo classe désignant les zones de saisie dont la valeur est indéterminée.:in-range: Pseudo-classe désignant les zones de saisie dont la valeur est dans la fourchette autorisée.:invalid: Pseudo classe désignant les zones de saisie contenant une information invalide.:optional: Pseudo élément désignant les zones de saisie non obligatoires.:out-of-range: Pseudo-classe désignant les zones de saisie dont la valeur est en dehors de la plage autorisée.:placeholder-shown: Pseudo-classe désignant les zones de saisie comportant un texte d'aide.:read-only: Pseudo-classe désignant les zones de saisie en lecture seule.:read-write: Pseudo-classe désignant les zones de saisie en lecture écriture.:required: Pseudo-classe désignant les zones de saisie obligatoires.:user-invalid: Pseudo-classe désignant les zones de saisie dont la valeur est invalide.:user-valid: Pseudo-classe désignant les zones de saisie dont la valeur est valide.:valid: Pseudo-classe désignant les zones de saisie contenant une information valide.