CSS :read-write Pseudo-classe
La pseudo-classe CSS :read-write sélectionne les éléments modifiables par l'utilisateur. Découvrez-la et pratiquez avec des exemples.
La pseudo-classe CSS :read-write correspond à tout élément que l'utilisateur peut modifier, comme un champ de texte dans lequel il peut saisir du contenu. Il s'agit d'une pseudo-classe d'action utilisateur / de saisie : elle cible les éléments en fonction de leur état d'édition actuel plutôt que d'un nom de balise ou d'une classe, ce qui vous permet de styliser « la zone dans laquelle le visiteur peut écrire » sans ajouter de balisage supplémentaire.
Cette page couvre ce qui compte comme élément en lecture-écriture, la syntaxe, un exemple fonctionnel, le pendant en lecture seule, et la manière dont :read-write s'intègre avec les pseudo-classes de formulaire associées.
Ce qui compte comme lecture-écriture
Un élément correspond à :read-write lorsqu'il est actuellement modifiable. Cela inclut :
- Les éléments
<input>dont le type accepte du texte (text, search, url, email, password, number, etc.) qui ne sont pasreadonlyet pasdisabled. - Les éléments
<textarea>qui ne sont nireadonlynidisabled. - Tout autre élément portant l'attribut
contenteditable(par ex. un<div contenteditable>), qui rend un contenu autrement statique modifiable.
Le cas opposé — un champ désactivé, un champ readonly, ou tout élément non modifiable tel qu'un paragraphe — correspond à :read-only à la place. Chaque élément est l'un ou l'autre, donc :read-only et :read-write couvrent ensemble l'intégralité du document.
Quand l'utiliser
Utilisez :read-write lorsque vous souhaitez un indicateur visuel qu'un élément est interactif :
- Donnez aux champs modifiables un arrière-plan ou une bordure distincte pour que les utilisateurs voient instantanément où ils peuvent saisir du texte.
- Associez-le à
:read-onlypour estomper les champs verrouillés (par exemple, un formulaire de profil où l'e-mail est fixe mais le nom d'affichage est modifiable). - Stylisez une région de texte enrichi
contenteditablede la même manière que les champs natifs pour un aspect cohérent.
La prise en charge navigateur de la pseudo-classe :read-write est large dans les navigateurs modernes, mais le comportement de style peut différer. L'état réel d'édition de l'élément est toujours correct — :read-write contrôle uniquement si vos styles sont appliqués — n'en dépendez donc jamais à d'autres fins que la présentation.
Le sélecteur :read-only est le pendant du sélecteur :read-write. Il sélectionne tout élément qui ne correspond pas à :read-write.
Version
Syntaxe
Exemple de syntaxe CSS :read-write
:read-write {
css declarations;
}Ici, css declarations représente les règles de style à appliquer à chaque élément modifiable de la page. Vous limiterez généralement la règle (par exemple input:read-write) pour qu'elle ne s'applique pas également aux régions contenteditable que vous préférez laisser telles quelles.
Exemple du sélecteur :read-write
Dans l'exemple ci-dessous, le premier champ est modifiable, il devient donc vert via :read-write. Le deuxième champ est readonly, il tombe donc sous la règle :read-only et apparaît en gris.
Exemple de code CSS :read-write
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
margin-bottom: 10px;
border: 1px solid #ddd;
padding: 5px;
}
input:read-only {
background-color: #ccc;
}
:read-write {
background: lightgreen;
}
</style>
</head>
<body>
<h2>:read-write selector example</h2>
<form>
<div>
<label for="read-write">Example1</label>
<input value="read-write input" id="read-write" />
</div>
<div>
<label for="read-only">Example2</label>
<input readonly value="read-only input" id="read-only" />
</div>
</form>
</body>
</html>Styliser une région contenteditable
:read-write n'est pas limité aux champs de formulaire. Tout élément portant l'attribut contenteditable devient modifiable et correspond donc à :read-write, ce qui vous permet de lui donner la même affordance qu'un vrai champ de saisie :
<!DOCTYPE html>
<html>
<head>
<title>contenteditable + :read-write</title>
<style>
div:read-write {
border: 1px dashed #4caf50;
padding: 8px;
outline: none;
}
</style>
</head>
<body>
<p>Click the box below and start typing:</p>
<div contenteditable>This text is editable.</div>
</body>
</html>Parce que le <div> porte contenteditable, la règle div:read-write s'applique et la zone reçoit la bordure en pointillés. Supprimez l'attribut et la règle ne correspond plus.
Compatibilité des navigateurs
| Navigateur | Support |
|---|---|
| Chrome | Oui |
| Firefox | Oui |
| Safari | Oui |
| Edge | Oui |
| Opera | Oui |
Sélecteurs associés
:read-only— le pendant qui correspond à chaque élément non modifiable.:disabledet:enabled— correspondent aux contrôles de formulaire selon leur état désactivé.:requiredet:optional— correspondent aux champs selon qu'ils doivent être remplis ou non.