W3docs
es
Iniciar sesión

Pseudoclase CSS :read-only

La pseudoclase CSS :read-only selecciona los elementos que no son editables. Lee sobre la pseudoclase y prueba ejemplos.

La pseudoclase CSS :read-only coincide con cualquier elemento que el usuario no puede editar. Es exactamente lo opuesto de :read-write: cada elemento es seleccionado por una u otra, nunca por ambas. Úsala para dar a los campos de solo lectura un aspecto diferenciado — por ejemplo, un fondo tenue — para que los usuarios vean de inmediato cuáles entradas pueden modificar.

Ejemplo del selector read-only

Qué se considera editable

Un elemento es editable (y por lo tanto seleccionado por :read-write, no por :read-only) cuando es uno de los siguientes:

  • Un elemento <input> que no tiene ni el atributo readonly ni el atributo disabled.
  • Un elemento <textarea> que no tiene ni el atributo readonly ni el atributo disabled.
  • Cualquier otro elemento que tenga el atributo contenteditable establecido en true.

Todo lo demás es de solo lectura, por lo que :read-only selecciona un elemento cuando:

  • es un <input> o <textarea> que lleva el atributo readonly, o
  • es un elemento simple cuyo atributo contenteditable es false o está ausente (la mayor parte de la página — párrafos, encabezados, divs, etc.).

Una sorpresa común: un atributo readonly en un <div> o <p> no tiene ningún efecto, porque readonly solo se aplica a controles de formulario. Dicho elemento es seleccionado por :read-only simplemente porque no es editable desde un principio — no por el atributo readonly. Para hacer editable un elemento que no sea de formulario, usa contenteditable="true".

:read-only se puede encadenar con otros selectores (como :hover) y combinar con pseudoelementos (como ::after).

Versión

CSS Basic User Interface Module Level 3

Disabled Elements — HTML5

Sintaxis

Sintaxis de CSS :read-only

:read-only {
  css declarations;
}

Ejemplo del selector :read-only:

Ejemplo 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>
Pruébalo tú mismo »

El atributo enumerado contenteditable indica si el usuario puede editar el elemento. Cuando está habilitado, el widget del navegador se modifica para permitir la edición. El atributo debe tener uno de los siguientes valores:

  • true (o la cadena vacía), lo que indica que el elemento debe ser editable;
  • false, lo que indica que el elemento no debe ser editable.

Ejemplo del selector :read-only con el atributo contenteditable:

Ejemplo de la pseudoclase CSS :read-only con el 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>
Pruébalo tú mismo »

Ejemplo del selector :read-only con la etiqueta HTML <textarea> al pasar el cursor:

Ejemplo del selector CSS :read-only con la etiqueta HTML <textarea> y el 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>
Pruébalo tú mismo »

Ejemplo del selector :read-only con la etiqueta HTML <div> y los pseudoelementos :after, :before:

Ejemplo de la pseudoclase CSS :read-only con los pseudoelementos :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>
Pruébalo tú mismo »

Práctica

Práctica
¿Qué selecciona la pseudoclase CSS :read-only?
¿Qué selecciona la pseudoclase CSS :read-only?
Was this page helpful?