MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

La pseudo-classe :read-write permet de cibler un élément lorsque celui-ci peut être édité par l'utilisateur (par exemple les champs texte d'un formulaire).

/* Cible tout élément éditable */
/* Pris en charge dans Firefox avec un préfixe */
input:-moz-read-write {
  background-color: #ccc;
}

/* Pris en charge sans préfixe pour Blink/WebKit/Edge */
input:read-write {
  background-color: #ccc;
}

Note : Ce sélecteur ne sélectionne pas que les champs de saisie textuels. Il permet de sélectionner n'importe quel élément qui peut être édité par l'utilisateur (par exemple un élément <p> avec un attribut contenteditable).

Syntaxe

:read-write

Exemples

CSS

input { min-width: 25em; }
input:-moz-read-write { background: cyan; }
input:read-write { background: cyan; }
p:-moz-read-write { background: lightgray; }
p:read-write { background: lightgray; }
p[contenteditable="true"] { color: blue; }

HTML

<input type="text" value="Un champ en lecture seule"/>
<p contenteditable>Essayez un peu d'éditer ce paragraphe.</p>
<p>Bonne chance pour celui-là !</p>

Résultat

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de ':read-write' dans cette spécification.
Standard évolutif Aucune modification.
HTML5
La définition de ':read-write' dans cette spécification.
Recommendation Définition de la sémantique relative à HTML et aux contraintes de validation.
Selectors Level 4
La définition de ':read-write' dans cette spécification.
Version de travail Définition de la pseudo-classe mais pas de la sémantique associée.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Support simple (Oui) (Oui)-mozbug 312971 (Oui) Nightly build [1] (Oui) (Oui)
Éléments éditables (en dehors des champs texte de formulaires) Pas de support (Oui)-mozbug 312971 Pas de support Pas de support Pas de support Pas de support
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) Edge IE Mobile Opera Mobile Safari Mobile
Support simple ? (Oui) (Oui)-mozbug 312971 (Oui) ? ? ?
Éléments éditables (en dehors des champs texte de formulaires) Pas de support Pas de support (Oui)-mozbug 312971 Pas de support Pas de support Pas de support Pas de support

[1] Pour Edge : intégré avec la Preview Build 10547+

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, teoli, tregagnon, FredB
 Dernière mise à jour par : SphinxKnight,