: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 juillet 2020.
La pseudo-classe CSS :read-write
représente un élément (tel que input
ou textarea
) qui peut être modifié par l'utilisateur·ice.
Exemple interactif
label,
input[type="submit"] {
display: block;
margin-top: 1em;
}
*:read-write {
background-color: ivory;
border: 2px solid darkorange;
border-radius: 5px;
}
<p>Veuillez remplir vos coordonnées :</p>
<form>
<label for="email">Adresse e-mail :</label>
<input id="email" name="email" type="email" value="test@example.com" />
<label for="note">Courte note à propos de vous :</label>
<textarea id="note" name="note">N'ayez pas peur</textarea>
<label for="pic">Votre photo :</label>
<input id="pic" name="pic" type="file" />
<input type="submit" value="Soumettre le formulaire" />
</form>
Syntaxe
:read-write {
/* ... */
}
Exemples
>Confirmation des détails du formulaire à l'aide de contrôles en lecture seule
Vous pouvez utiliser le contrôle de formulaire readonly
lorsque vous souhaitez qu'un·e utilisateur·ice vérifie les informations qu'il a saisies précédemment, que vous souhaitez soumettre avec de nouvelles données dans des contrôles en lecture-écriture.
Dans l'exemple ci-dessous, la pseudo-classe :read-only
est utilisée pour faire en sorte que le <textarea>
(l'adresse d'un utilisateur) ressemble à un paragraphe ordinaire. La pseudo-classe :read-write
fournit un moyen de mettre en évidence le <textarea>
modifiable (les instructions de livraison) :
textarea:read-only {
border: 0;
}
textarea:read-write {
box-shadow: inset 1px 1px 3px #cccccc;
border-radius: 5px;
}
<form>
<fieldset>
<legend>Confirmer les détails d'expédition</legend>
<div>
<label for="address">Adresse :</label>
<textarea id="address" name="address" readonly>
16 Rue des Blagues,
Blagues en Cascades,
France</textarea
>
</div>
<div>
<label for="instructions">Instructions de livraison :</label>
<textarea id="instructions" name="instructions"></textarea>
</div>
</fieldset>
<button type="submit">Confirmer</button>
</form>
Mise en forme des contrôles non-formulaires en lecture-écriture
Ce sélecteur ne sélectionne pas seulement les éléments <input>
/<textarea>
— il sélectionnera tout élément qui peut être modifié par l'utilisateur, comme un élément <p>
avec l'attribut contenteditable
activé.
HTML
<p contenteditable>
Ce paragraphe est modifiable ; il est en lecture-écriture.
</p>
<p>Ce paragraphe n'est pas modifiable ; il est en lecture seule.</p>
CSS
body {
font-family: sans-serif;
}
p {
font-size: 150%;
padding: 5px;
border-radius: 5px;
}
p:read-only {
background-color: red;
color: white;
}
p:read-write {
background-color: lime;
}
Résultat
Spécifications
Specification |
---|
HTML> # selector-read-write> |
Selectors Level 4> # read-write-pseudo> |
Compatibilité des navigateurs
Loading…
Voir aussi
:read-only
- L'attribut HTML
contenteditable