:read-write

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 ou les éléments <textarea>).

/* 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 (<input> ou <textarea>). 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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
:read-writeChrome Support complet 1Edge Support complet 13Firefox Support complet 1.5
Préfixée Notes
Support complet 1.5
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes See bug 312971 for unprefixed status.
IE Aucun support NonOpera Support complet OuiSafari Support complet 4WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4
Préfixée Notes
Support complet 4
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes See bug 312971 for unprefixed status.
Opera Android Support complet OuiSafari iOS Support complet 3.2Samsung Internet Android Support complet 1.0
Matches editable elements that are neither <input> elements nor <textarea> elementsChrome Aucun support NonEdge Aucun support NonFirefox Support complet 1.5IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 4Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi