W3docs
es
Iniciar sesión

CSS :checked Pseudo Clase

Usa la pseudo-clase CSS :checked para seleccionar y estilizar elementos <input> y <option>. Aprende con ejemplos prácticos.

La pseudo-clase :checked selecciona elementos que se encuentran actualmente en el estado marcado (seleccionado). Se aplica únicamente a tres tipos de elementos:

  • <input type="checkbox"> cuando la casilla está marcada,
  • <input type="radio"> cuando el botón de radio está seleccionado,
  • elementos <option> (dentro de un <select> o <datalist>) que estén elegidos actualmente.

Dado que estos controles son activados y desactivados por el usuario, :checked es una pseudo-clase dinámica: los estilos que escribas bajo ella se aplican únicamente mientras el control está en estado activo, y el navegador los reevalúa en el momento en que el usuario hace clic. Esto la convierte en la base de la interactividad solo con CSS — puedes construir interruptores, acordeones, pestañas y controles de formulario con estilos personalizados sin una sola línea de JavaScript.

Esta página explica qué elementos coinciden con :checked, cómo combinarla con combinadores de hermanos para estilizar otros elementos (la mayoría de los usos reales hacen esto), tres ejemplos ejecutables y los aspectos de accesibilidad a tener en cuenta.

Cómo funciona :checked con combinadores

:checked por sí sola solo puede estilizar el propio control, y las casillas de verificación y los botones de radio nativos son difíciles de reestilizar. El verdadero poder viene de combinarla con un combinador para que un input marcado estilice un elemento vecino:

  • Hermano adyacente (+) — input:checked + label estiliza la etiqueta que sigue inmediatamente a un input marcado.
  • Hermano general (~) — input:checked ~ .panel estiliza cualquier hermano posterior, permitiendo que una casilla revele toda una sección.

Un patrón habitual es ocultar visualmente el input real y dejar que el usuario haga clic en un <label> vinculado a él (hacer clic en una etiqueta activa el control asociado). La casilla permanece en el árbol de accesibilidad, pero tú controlas los elementos visuales a través de :checked y la etiqueta.

Versión

HTML Living Standard

HTML5

Selectors Level 4

Sintaxis

Ejemplo de sintaxis CSS :checked

:checked {
  css declarations;
}

En el siguiente ejemplo, marca la casilla para ver cómo funciona.

Ejemplo del selector :checked con la etiqueta <div>:

Ejemplo de código CSS :checked

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin: 10px;
        font-size: 20px;
      }
      input:checked + label {
        color: #000;
      }
      input[type="radio"]:checked {
        box-shadow: 0 0 0 4px #8ebf42;
      }
        /* Checkbox element, when checked */
        input[type="checkbox"]:checked {
        box-shadow: 0 0 0 3px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:checked selector example</h2>
    <div>
      <input type="radio" name="my-input" id="yes" />
      <label for="yes">Yes</label>
      <input type="radio" name="my-input" id="no" />
      <label for="no">No</label>
    </div>
    <div>
      <input type="checkbox" name="my-checkbox" id="opt-in" />
      <label for="opt-in">Check!</label>
    </div>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo del selector :checked con las etiquetas <table>, <tr>, <th>, <td>:

Ejemplo de imitación de clic con CSS :checked

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table,tr,th,td {
        border: 1px solid #ccc;
        text-align: center;
        border-collapse: collapse;
        padding: 8px;
      }
      #toggle {
        display: none;
      }
      .expandable {
        visibility: collapse;
        background: #1c87c9;
      }
      #btn {
        display: inline-block;
        margin-top: 15px;
        padding: 10px 20px;
        background-color: #8ebf42;
        color: #fff;
        cursor: pointer;
        border-radius: 3px;
      }
      #toggle:checked ~ * .expandable {
        visibility: visible;
      }
      #toggle:checked ~ #btn {
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>:checked selector example</h2>
    <input type="checkbox" id="toggle" />
    <table>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr class="expandable">
          <td>[more text]</td>
          <td>[more text]</td>
          <td>[more text]</td>
        </tr>
        <tr>
          <td>[text]</td>
          <td>[text]</td>
          <td>[text]</td>
        </tr>
        <tr class="expandable">
          <td>[more text]</td>
          <td>[more text]</td>
          <td>[more text]</td>
        </tr>
        <tr>
          <td>[text]</td>
          <td>[text]</td>
          <td>[text]</td>
        </tr>
        <tr class="expandable">
          <td>[more text]</td>
          <td>[more text]</td>
          <td>[more text]</td>
        </tr>
      </tbody>
    </table>
    <label for="toggle" id="btn">Click here!</label>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo del selector :checked:

Ejemplo de la pseudo-clase CSS :checked:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input[type=checkbox] {
        vertical-align:middle;
      }
      input[type=checkbox] + label {
        color: #999999;
        font-style: normal;
      } 
      input[type=checkbox]:checked + label {
        color: #8ebf42;
        font-style: italic;
        font-weight:bold;
      } 
    </style>
  </head>
  <body>
    <h2>:checked selector example</h2>
    <form>
      <input type="checkbox" id="css" name="css" /> 
      <label for="css">Here is CSS example.</label> 
    </form>
  </body>
</html>
Pruébalo tú mismo »

Así, la pseudo-clase :checked puede usarse para hacer los formularios más interactivos y para construir widgets con inputs ocultos y sus etiquetas visibles.

Casos de uso habituales

  • Casillas de verificación y botones de radio personalizados. Oculta el control nativo con appearance: none (o recortándolo) y dibuja tu propio indicador que reaccione a input:checked.
  • Paneles de alternancia / "mostrar más". Una casilla oculta más :checked ~ .panel { display: block } expande o contrae contenido (como en el ejemplo de tabla anterior) sin JavaScript.
  • Pestañas y acordeones solo con CSS. Agrupa botones de radio por name, luego usa input:checked ~ ... para mostrar el panel correspondiente.
  • Estilizar el estado de <option>. option:checked te permite resaltar el elemento seleccionado actualmente en un <select>.

Accesibilidad y consideraciones importantes

  • Mantén el input enfocable. Usa appearance: none, recorte u opacity: 0 en lugar de display: none si deseas que los usuarios de teclado puedan acceder y activar el control. display: none elimina el input del orden de tabulación por completo.
  • Siempre vincula un control con un <label>. Un <label> correctamente asociado (mediante for/id) convierte el texto visible en un objetivo de clic y de lectores de pantalla para el control.
  • El elemento estilizado debe ser un hermano que aparezca después del input. Los combinadores de hermanos de CSS (+, ~) solo miran hacia adelante, por lo que coloca el input antes que los elementos que controla en el HTML.
  • :checked refleja el estado en vivo, no el atributo HTML. Incluso un elemento sin el atributo checked coincide con :checked una vez que el usuario lo selecciona, y uno con el atributo deja de coincidir una vez que el usuario lo desmarca.

Pseudo-clases relacionadas

:checked se combina a menudo con otras pseudo-clases de estado y de formulario:

  • :disabled — estiliza controles con los que el usuario no puede interactuar.
  • :required — estiliza campos que deben ser completados.
  • :focus y :hover — estiliza estados de interacción, útil para controles personalizados.
  • :not() — invierte una selección, p. ej. input:not(:checked).

Consulta la lista completa de selectores CSS para más formas de seleccionar elementos.

Práctica

Práctica
¿Cuál es la función de la pseudo-clase ':checked' en CSS?
¿Cuál es la función de la pseudo-clase ':checked' en CSS?
Was this page helpful?