This translation is incomplete. Please help translate this article from English.
La pseudo-classe CSS :checked representa qualsevol radio (<input type = "radio">), checkbox (<input type = "checkbox">) o option (<option> en un element <select>) que és canviat o activat en un estat on. L'usuari pot canviar aquest estat fent clic a l'element, o seleccionant un valor diferent, en aquest cas la pseudo-classe :checked ja no s'aplica a aquest element, però sí al rellevant.
Sintaxi
input:checked {
margin-left: 25px;
border: 1px solid blue;
}
Sintaxi formal
:checked { style properties }
Exemples
Exemple de selectors
/* any "checkable" element */
:checked {
width: 50px;
height: 50px;
}
/* only radio elements */
input[type="radio"]:checked {
margin-left: 25px;
}
/* only checkbox elements */
input[type="checkbox"]:checked {
display: none;
}
/* only option elements */
option:checked {
color: red;
}
input[type="radio"]:checked- Representa tots els botons d'opció de la pàgina que estan marcats
input[type="checkbox"]:checked- Representa totes les caselles de verificació de la pàgina que estan marcades
option:checked- Representa totes les opcions de selecció de la pàgina que estan seleccionats
Ús de caselles de verificació ocults per tal d'emmagatzemar alguns valors booleans CSS
La pseudo-classe :checked aplicada a les caselles de verificació ocultes, adjuntes al principi de la pàgina, es podria emprar per tal d'emmagatzemar alguns valors booleans dinàmics per a ser utilitzats en una regla CSS. En el següent exemple es mostra com amagar/mostrar alguns elements extensibles simplement fent clic en un botó (descàrrega aquesta demo).
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Expandable elements</title>
<style>
#expand-btn {
margin: 0 3px;
display: inline-block;
font: 12px / 13px "Lucida Grande", sans-serif;
text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
padding: 3px 6px;
border: 1px solid rgba(0, 0, 0, 0.6);
background-color: #969696;
cursor: default;
border-radius: 3px;
box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
}
#isexpanded:checked ~ #expand-btn, #isexpanded:checked ~ * #expand-btn {
background: #B5B5B5;
box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
}
#isexpanded, .expandable {
display: none;
}
#isexpanded:checked ~ * tr.expandable {
display: table-row;
background: #cccccc;
}
#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable {
display: block;
background: #cccccc;
}
</style>
</head>
<body>
<input type="checkbox" id="isexpanded" />
<h1>Expandable elements</h1>
<table>
<thead>
<tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr>
</thead>
<tbody>
<tr class="expandable"><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><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
<tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
<tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
</tbody>
</table>
<p>[some sample text]</p>
<p><label for="isexpanded" id="expand-btn">Show hidden elements</label></p>
<p class="expandable">[another sample text]</p>
<p>[some sample text]</p>
</body>
</html>
Ùs de radioboxes ocults per tal d'emmagatzemar alguns valors booleans CSS
També podeu utilitzar la pseudo-classe :checked aplicat a radioboxes ocults per tal de construir, per exemple, una galeria d'imatges en la qual es mostra la imatge sencera només si cliqueu el ratolí a la vista prèvia. Vegeu aquesta demostració per a una possible guia.
:hover i sense radioboxes ocults, vegeu aquesta demostració, obtinguda de la pàgina :hover.Especificacions
| Especificació | Estat | Comentari |
|---|---|---|
| WHATWG 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. |
Candidate 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
| Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Suport bàsic | 1.0 | 1.0 (1.7 or earlier) | 9.0 | 9.0 | 3.1 |
| Característica | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Suport bàsic | 2.1 | 1.0 (1.0) | 9.0 | 9.5 | 3.1 |