W3docs
it
Accedi

CSS :read-only Pseudo Class

La pseudo-classe CSS :read-only seleziona gli elementi non modificabili. Scopri la pseudo-classe e prova gli esempi.

La pseudo-classe CSS :read-only corrisponde a qualsiasi elemento che l'utente non può modificare. È l'esatto opposto di :read-write: ogni elemento è abbinato all'una o all'altra, mai a entrambe. Usala per dare ai campi di sola lettura un aspetto distinto — ad esempio, uno sfondo attenuato — così gli utenti vedono immediatamente quali input possono modificare.

Esempio del selettore read-only

Cosa si considera modificabile

Un elemento è modificabile (e quindi abbinato a :read-write, non a :read-only) quando è uno dei seguenti:

  • Un elemento <input> che non ha né l'attributo readonly né l'attributo disabled.
  • Un <textarea> che non ha né l'attributo readonly né l'attributo disabled.
  • Qualsiasi altro elemento che ha l'attributo contenteditable impostato su true.

Tutto il resto è di sola lettura, quindi :read-only corrisponde a un elemento quando:

  • è un <input> o <textarea> con l'attributo readonly, oppure
  • è un elemento normale il cui attributo contenteditable è false o assente (la maggior parte della pagina — paragrafi, intestazioni, div e così via).

Una sorpresa comune: un attributo readonly su un <div> o <p> non ha alcun effetto, perché readonly si applica solo ai controlli di form. Tale elemento è abbinato a :read-only semplicemente perché non è modificabile di per sé — non a causa dell'attributo readonly. Per rendere modificabile un elemento non-form, usa contenteditable="true".

:read-only può essere concatenato con altri selettori (come :hover) e combinato con pseudo-elementi (come ::after).

Versione

CSS Basic User Interface Module Level 3

Disabled Elements — HTML5

Sintassi

Sintassi CSS :read-only

:read-only {
  css declarations;
}

Esempio del selettore :read-only:

Esempio di codice 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>
Provalo tu stesso »

L'attributo enumerato contenteditable indica se l'utente può modificare l'elemento. Quando abilitato, il widget del browser viene modificato per consentire la modifica. L'attributo deve avere uno dei seguenti valori:

  • true (o la stringa vuota), che indica che l'elemento deve essere modificabile;
  • false, che indica che l'elemento non deve essere modificabile.

Esempio del selettore :read-only con l'attributo contenteditable:

Esempio della pseudo-classe CSS :read-only con l'attributo 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>
Provalo tu stesso »

Esempio del selettore :read-only con il tag HTML <textarea> al passaggio del mouse:

Esempio del selettore CSS :read-only con il tag HTML <textarea> e il caso hover

<!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>
Provalo tu stesso »

Esempio del selettore :read-only con il tag HTML <div> e gli pseudo-elementi :after, :before:

Esempio della pseudo-classe CSS :read-only con gli pseudo-elementi :before e :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>
Provalo tu stesso »

Esercizio

Pratica
Cosa seleziona la pseudo-classe CSS :read-only?
Cosa seleziona la pseudo-classe CSS :read-only?
Was this page helpful?