Les pseudo-classes `:read-only` et `:read-write`.

:read-only

:read-write

Résumé des caractéristiques du sélecteur `:read-only`

Description rapide

Pseudo-classe désignant les zones de saisie en lecture seule.

Statut

Standard

Module W3C

Sélecteurs

Références (W3C)

Selectors Level 4

Statut du document: WD (document de travail)

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. 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 :	De 8h à 17h en semaine.

Exemple sur d'autres éléments que des zones de saisie.

Avec l'attribut contenteditable, HTML 5 permet de rendre presque toutes les balises éditables. Le tableau ci-dessous comporte certaines cellules éditables (elles comportent l'attribut contenteditable). Ces cellules sont encadrées en vert. Celles qui ne sont pas éditables ont un encadré légèrement gris.

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.

Colonne 1

Support par les navigateurs des pseudo-classes :read-only qui cible les zone de saisie en lecture seule, et :read-write qui cible les zones de saisie accessibles.

Pseudo-classes
:read-ony
:read-write

Estimation de la prise en charge globale.

96%

Navigateurs 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 le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la pseudo-classe `:read-only`.

Sélecteurs - Niveau 4

Concernant :read-only. Présentation des sélecteurs par pseudo-classe :read-only et :read-write dans ce niveau 4 de la spécification sur les sélecteurs.

29 Septembre 2011
Document de travail.

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.

⚠

:closed

Pseudo-classe ciblant un élément pouvant être soit ouvert, soit fermé (comme un menu select), et qui se trouve dans l'état fermé.

:default

Pseudo-classe ciblant les cases à cocher et boutons radio qui sont cochés par défaut.