W3docs
fr
Se connecter

Pseudo-classe CSS :read-only

La pseudo-classe CSS :read-only sélectionne les éléments non modifiables. Découvrez-la et essayez des exemples.

La pseudo-classe CSS :read-only correspond à tout élément que l'utilisateur ne peut pas modifier. Elle est l'exact opposé de :read-write : chaque élément est ciblé par l'une ou l'autre, jamais par les deux. Utilisez-la pour donner aux champs en lecture seule un aspect distinctif — par exemple, un arrière-plan atténué — afin que les utilisateurs voient instantanément quels champs ils peuvent modifier.

Exemple de sélecteur read-only

Ce qui est considéré comme modifiable

Un élément est modifiable (et donc ciblé par :read-write, et non par :read-only) lorsqu'il est l'un des suivants :

  • Un élément <input> qui ne possède ni l'attribut readonly ni l'attribut disabled.
  • Un élément <textarea> qui ne possède ni l'attribut readonly ni l'attribut disabled.
  • Tout autre élément dont l'attribut contenteditable est défini sur true.

Tout le reste est en lecture seule, donc :read-only cible un élément lorsque :

  • c'est un <input> ou un <textarea> portant l'attribut readonly, ou
  • c'est un élément ordinaire dont l'attribut contenteditable est à false ou absent (la majeure partie de la page — paragraphes, titres, divs, etc.).

Une surprise fréquente : un attribut readonly sur un <div> ou un <p> n'a aucun effet, car readonly s'applique uniquement aux contrôles de formulaire. Un tel élément est ciblé par :read-only simplement parce qu'il n'est pas modifiable par nature — pas en raison de l'attribut readonly. Pour rendre un élément non-formulaire modifiable, utilisez contenteditable="true".

:read-only peut être chaîné avec d'autres sélecteurs (comme :hover) et combiné avec des pseudo-éléments (comme ::after).

Version

CSS Basic User Interface Module Level 3

Disabled Elements — HTML5

Syntaxe

Syntaxe CSS :read-only

:read-only {
  css declarations;
}

Exemple du sélecteur :read-only :

Exemple de code CSS :read-only

<!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;
      }
    </style>
  </head>
  <body>
    <h2>:read-only selector example</h2>
    <form>
      <div>
        <label for="normal">Example1</label>
        <input value="normal input" id="normal" />
      </div>
      <div>
        <label for="read-only">Example2</label>
        <input readonly value="read-only input" id="read-only" />
      </div>
    </form>
  </body>
</html>
Essayez vous-même »

L'attribut énuméré contenteditable indique si l'utilisateur peut modifier l'élément. Lorsqu'il est activé, le rendu du navigateur est modifié pour permettre l'édition. L'attribut doit avoir l'une des valeurs suivantes :

  • true (ou la chaîne vide), indiquant que l'élément doit être modifiable ;
  • false, indiquant que l'élément ne doit pas être modifiable.

Exemple du sélecteur :read-only avec l'attribut contenteditable :

Exemple de la pseudo-classe CSS :read-only avec l'attribut contenteditable

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:read-only {
        background: #8ebf42;
      }
      p[contenteditable="true"] {
        color: #777777;
      }
    </style>
  </head>
  <body>
    <h2>:read-only selector example</h2>
    <p>Example of a normal paragraph.</p>
    <p contenteditable="true">Example of a contenteditable paragraph! Just click and edit!</p>
  </body>
</html>
Essayez vous-même »

Exemple du sélecteur :read-only avec la balise HTML <textarea> au survol :

Exemple du sélecteur CSS :read-only avec la balise HTML <textarea> et le cas de survol

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      textarea:read-only {
        background: #ffffff;
      }
      textarea:read-only:hover {
        cursor: not-allowed;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:read-only selector example</h2>
    <textarea cols="40" rows="5" readonly>Here is an example of :read-only selector on hover.</textarea>
  </body>
</html>
Essayez vous-même »

Exemple du sélecteur :read-only avec la balise HTML <div> et les pseudo-éléments :after, :before :

Exemple de la pseudo-classe CSS :read-only avec les pseudo-éléments :before, :after

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div:read-only:hover {
        background-color: #eee;
      }
      div:read-only:before,
      div:read-only:after {
        content: " / ";
        padding: 10px;
        color: #1c87c9;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>:read-only selector example</h2>
    <div readonly>Here is an example of :read-only selector on hover.</div>
    <br />
    <div contenteditable="true">Example of a contenteditable paragraph! Just click and edit!</div>
  </body>
</html>
Essayez vous-même »

Pratique

Pratique
Que sélectionne la pseudo-classe CSS :read-only ?
Que sélectionne la pseudo-classe CSS :read-only ?
Was this page helpful?