This translation is incomplete. Please help translate this article from English.

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!

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

 

Document Tags and Contributors

Contributors to this page: Legioinvicta
Last updated by: Legioinvicta,