: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>).

css

/* 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

Error: could not find syntax for this item

Exemples

CSS

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

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

Specification
HTML Standard
# selector-read-write
Selectors Level 4
# rw-pseudos

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi