W3docs
pt
Entrar

CSS :read-only Pseudo Classe

A pseudo-classe CSS :read-only seleciona elementos que não são editáveis. Leia sobre a pseudo-classe e experimente exemplos.

A pseudo-classe CSS :read-only corresponde a qualquer elemento que o utilizador não consiga editar. É o oposto exato de :read-write: cada elemento é correspondido por uma ou pela outra, nunca por ambas. Use-a para dar aos campos somente leitura uma aparência distinta — por exemplo, um fundo suavizado — para que os utilizadores identifiquem imediatamente quais entradas podem alterar.

Exemplo do seletor read-only

O que conta como editável

Um elemento é editável (e, portanto, correspondido por :read-write, não por :read-only) quando é um dos seguintes:

  • Um elemento <input> que não possui nem o atributo readonly nem o atributo disabled.
  • Um <textarea> que não possui nem o atributo readonly nem o atributo disabled.
  • Qualquer outro elemento que possua o atributo contenteditable definido como true.

Tudo o mais é somente leitura, portanto :read-only corresponde a um elemento quando:

  • é um <input> ou <textarea> com o atributo readonly, ou
  • é um elemento simples cujo atributo contenteditable é false ou está ausente (a maior parte da página — parágrafos, títulos, divs, entre outros).

Uma surpresa comum: um atributo readonly num <div> ou <p> não tem efeito, porque readonly aplica-se apenas a controles de formulário. Tal elemento é correspondido por :read-only simplesmente porque não é editável por padrão — não por causa do atributo readonly. Para tornar um elemento que não é de formulário editável, use contenteditable="true".

:read-only pode ser encadeado com outros seletores (como :hover) e combinado com pseudo-elementos (como ::after).

Versão

CSS Basic User Interface Module Level 3

Disabled Elements — HTML5

Sintaxe

Sintaxe CSS :read-only

:read-only {
  css declarations;
}

Exemplo do seletor :read-only:

Exemplo de código 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>
Experimente Você Mesmo »

O atributo enumerado contenteditable indica se o utilizador pode editar o elemento. Quando ativado, o widget do navegador é modificado para permitir a edição. O atributo deve ter um dos seguintes valores:

  • true (ou a string vazia), indicando que o elemento deve ser editável;
  • false, indicando que o elemento não deve ser editável.

Exemplo do seletor :read-only com o atributo contenteditable:

Exemplo de pseudo-classe CSS :read-only com o atributo 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>
Experimente Você Mesmo »

Exemplo do seletor :read-only com a tag HTML <textarea> ao passar o mouse:

Exemplo do seletor CSS :read-only com a tag HTML <textarea> e o caso ao passar o mouse

<!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>
Experimente Você Mesmo »

Exemplo do seletor :read-only com a tag HTML <div> e os pseudo-elementos :after, :before:

Exemplo de pseudo-classe CSS :read-only com pseudo-elementos :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>
Experimente Você Mesmo »

Prática

Prática
O que a pseudo-classe CSS :read-only seleciona?
O que a pseudo-classe CSS :read-only seleciona?
Was this page helpful?