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