La pseudo-classe CSS :read-write

Le sélecteur :read-write sélectionne les éléments qui sont modifiables par l'utilisateur.

Les éléments modifiables incluent :

<input> éléments qui ne sont pas en lecture seule et qui ne sont pas désactivés.
<textarea> éléments qui ne sont ni en lecture seule ni désactivés.
Un élément qui n'est ni un <input> ni un <textarea>, et qui possède l'attribut contenteditable défini.

INFO

La prise en charge de la pseudo-classe :read-write par les navigateurs varie. Bien que l'état de modification réel de l'élément reste le même, certains navigateurs peuvent ne pas appliquer les styles associés ou traiter la pseudo-classe différemment.

Le sélecteur :read-only est l'opposé du sélecteur :read-write. Il sélectionne tous les éléments qui ne correspondent pas à :read-write.

Version

HTML5

Selectors Level 4

Syntaxe

Exemple de syntaxe CSS :read-write

css

:read-write {
  css declarations;
}

Exemple du sélecteur `:read-write` :

Exemple de code CSS :read-write

html

<!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>

Try it Yourself »

Compatibilité des navigateurs

Navigateur	Prise en charge
Chrome	Oui
Firefox	Oui
Safari	Oui
Edge	Oui
Opera	Oui

Pratique

Que pouvez-vous apprendre de la section 'Read/Write' sur W3Docs ?

Comment colorier l'arrière-plan d'une page web en CSSComment lire et écrire des déclarations CSSLes bases de JavaScript et HTMLSyntaxe générale des règles CSSComment intégrer du CSS dans un projet HTML existant

La pseudo-classe CSS :read-write ​

Version ​

Syntaxe ​

Exemple du sélecteur :read-write : ​