:checked

La pseudo-class CSS :checked representa qualsevol radio (<input type="radio">), checkbox (<input type="checkbox">) o option (<option> en un element <select>)   que est脿 marcat o commutat a un estat on (activat).

/* Matches any checked/selected radio, checkbox, or option */
:checked {
  margin-left: 25px;
  border: 1px solid blue;
}

L'usuari pot activar aquest estat marcant/seleccionant un element o desactivar-ho desmarcant/deseleccionant l'element.

Nota: Com que els navegadors sovint tracten <option>s com a elements reempla莽ats, el grau en qu猫 poden ser dissenyats amb la pseudo-class :checked varia d'un navegador a un altre.

Sintaxi

:checked

Exemples

Basic example

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="yes">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;
}

/* Labels for checked inputs */
input:checked + label {
  color: red;
}

/* Radio element, when checked */
input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

/* Checkbox element, when checked */
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}

/* Option elements, when selected */
option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;
}

Resultat

Alternar elements amb una casella de selecci贸 oculta

En aquest exemple s'utilitza la pseudo-class :checked per permetre a l'usuari que alterni el contingut en funci贸 de l'estat d'una casella de selecci贸 (checkbox), tot sense utilitzar JavaScript.

HTML

<input type="checkbox" id="expand-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>[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

/* Oculta la casella de selecci贸 (checkbox) */
#expand-toggle {
  display: none;
}

/* Oculta el contingut expandible per defecte */
.expandable {
  visibility: collapse;
  background: #ddd;
}

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

/* Mostra el contingut ocult quan es marca la casella de selecci贸 */
#expand-toggle:checked ~ * .expandable {
  visibility: visible;
}

/* Estil del bot贸 quan est脿 marcada la casella de selecci贸 */
#expand-toggle:checked ~ #expand-btn {
  background-color: #ccc;
}

Resultat

Galeria d'imatges

Podeu utilitzar la pseudo-class :checked per construir una galeria d'imatges amb imatges de grand脿ria completa que nom茅s es mostrin quan l'usuari faci clic a una miniatura. Vegeu aquesta demostraci贸 com un possible exemple.

Nota: Per a un efecte an脿leg, per貌 basat en la pseudo-classe :hover i sense caixes de r脿dio (radioboxes) ocultes, vegeu aquesta demostraci贸, presa de la p脿gina de refer猫ncia :hover.

Especificacions

Especificaci贸 Estat Comentari
HTML Living Standard
The definition of ':checked' in that specification.
Living Standard Sense canvis.
HTML5
The definition of ':checked' in that specification.
Recommendation Defineix la sem脿ntica respecte HTML.
Selectors Level 4
The definition of ':checked' in that specification.
Working Draft Sense canvis.
CSS Basic User Interface Module Level 3
The definition of ':checked' in that specification.
Recommendation Enlla莽 a Selectors Level 3.
Selectors Level 3
The definition of ':checked' in that specification.
Recommendation Defineix la pseudo-classe, per貌 no la sem脿ntica associada

Navegadors compatibles

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Descripci贸 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suport b脿sic 1.0 (Yes) 1.0 (1.7 or earlier) 9.0 9.0 3.1
Descripci贸 Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport b脿sic 2.1 (Yes) 1.0 (1.0) 9.0 9.5 3.1