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-writeNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
QQ Browser
Firefox pour Androïd
Opéra Mobile
Baidu Browser
KaiOS Browser
UC Browser pour Androïd
Opéra
Safari
Firefox
Safari sur IOS
Chrome pour Androïd
Samsung Internet
Chrome
Edge
Androïd Brower
Opé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.