: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>
).
/* 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
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
Specification |
---|
HTML Standard # selector-read-write |
Selectors Level 4 # rw-pseudos |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
:read-only
- L'attribut HTML
contenteditable