:read-write

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨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&nbsp;:</p> <form> <label for="email">Adresse e-mail&nbsp;:</label> <input id="email" name="email" type="email" value="test@example.com" /> <label for="note">Courte note à propos de vous&nbsp;:</label> <textarea id="note" name="note">N'ayez pas peur</textarea> <label for="pic">Votre photo&nbsp;:</label> <input id="pic" name="pic" type="file" /> <input type="submit" value="Soumettre le formulaire" /> </form>

Syntaxe

css

:read-write { /* ... */ }

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

body { font-family: "Josefin Sans", sans-serif; margin: 10px auto; } legend { color: white; background: black; padding: 5px 10px; } fieldset > div { margin-bottom: 10px; display: flex; justify-content: space-between; } button, label, textarea { display: block; font-family: inherit; font-size: 100%; margin: 0; box-sizing: border-box; padding: 5px; height: 30px; } textarea { width: 50%; } textarea { height: 70px; resize: none; } label { width: 40%; }

css

textarea:read-only { border: 0; } textarea:read-write { box-shadow: inset 1px 1px 3px #cccccc; border-radius: 5px; }

html

<form> <fieldset> <legend>Confirmer les détails d'expédition</legend> <div> <label for="address">Adresse&nbsp;:</label> <textarea id="address" name="address" readonly> 16 Rue des Blagues, Blagues en Cascades, France</textarea > </div> <div> <label for="instructions">Instructions de livraison&nbsp;:</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

html

<p contenteditable> Ce paragraphe est modifiable&nbsp;; il est en lecture-écriture. </p> <p>Ce paragraphe n'est pas modifiable&nbsp;; il est en lecture seule.</p>

CSS

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; }