:read-write

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

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
# read-write-pseudo

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi