Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

La pseudo-clase :checked de CSS representa cualquier radio (<input type="radio">), checkbox (<input type="checkbox">) u option (<option> en un elemento <select>) que está marcado o conmutado a un estado on.

/* Coincide con cualquier checked/selected radio, checkbox, u option */
:checked {
  margin-left: 25px;
  border: 1px solid blue;
}

El usuario puede activar este estado marcando/seleccionando un elemento, o desactivándolo desmarcando/deseleccionando el elemento.

Nota: Debido a que los navegadores a menudo tratan las <option> s como elementos reemplazados, la medida en que se pueden diseñar con la pseudo-clase :checked varía de un navegador a otro.

Sintaxis

:checked

Ejemplos

Ejemplo básico

HTML

<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 me!</label>
</div>

<select name="my-select" id="fruit">
  <option value="opt1">Apples</option>
  <option value="opt2">Grapes</option>
  <option value="opt3">Pears</option>
</select>

CSS

div,
select {
  margin: 8px;
}

/* Etiquetas para entradas marcadas */
input:checked + label {
  color: red;
}

/* Elemento Radio, cuando está marcado */
input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

/* Elemento Checkbox, cuando está marcado */
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}

/* Elementos Option, cuando se seleccionan */
option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;
}

Resultado

Alternar elementos con un checkbox oculto

Este ejemplo utiliza la pseudoclase :checked para permitir al usuario alternar contenido según el estado de un checkbox, todo sin usar JavaScript.

HTML

<input type="checkbox" id="expand-toggle" />

<table>
  <thead>
    <tr><th>Columna #1</th><th>Columna #2</th><th>Columna #3</th></tr>
  </thead>
  <tbody>
    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
  </tbody>
</table>

<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>

CSS

/* Hide the toggle checkbox */
#expand-toggle {
  display: none;
}

/* Hide expandable content by default */
.expandable {
  visibility: collapse;
  background: #ddd;
}

/* Style the button */
#expand-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 11px;
  background-color: #ff7;
  border: 1px solid;
  border-radius: 3px;
}

/* Show hidden content when the checkbox is checked */
#expand-toggle:checked ~ * .expandable {
  visibility: visible;
}

/* Style the button when the checkbox is checked */
#expand-toggle:checked ~ #expand-btn {
  background-color: #ccc;
}

Resultado

Galería de imágenes

Puede usar la pseudoclase :checked para crear una galería de imágenes con imágenes de tamaño completo que solo se muestran cuando el usuario hace clic en una miniatura. Vea esta demostración.

Nota: Para un efecto análogo, pero basado en la pseudoclase :hover y sin radioboxes ocultos, vea esta demostración, tomada de la página de referencia :hover.

Especificaciones

Especificación Estado Comentarios
HTML Living Standard
La definición de ':checked' en esta especificación.
Living Standard Ningún cambio.
HTML5
La definición de ':checked' en esta especificación.
Recommendation Define la semántica con respecto a HTML.
Selectors Level 4
La definición de ':checked' en esta especificación.
Working Draft Ningún cambio.
CSS Basic User Interface Module Level 3
La definición de ':checked' en esta especificación.
Proposed Recommendation Enlace al Nivel 3 de Selectores.
Selectors Level 3
La definición de ':checked' en esta especificación.
Recommendation Define la pseudoclase, pero no la semántica asociada.

Compatibilidad con navegadores

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Soporte básico1 Si1993.1
FeatureAndroid webviewChrome para AndroidEdge mobileFirefox para AndroidOpera AndroidiOS SafariSamsung Internet
Soporte básico2.1 ? Si49.53.1 ?

Etiquetas y colaboradores del documento

Colaboradores en esta página: lajaso, zxhadow
Última actualización por: lajaso,