MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

:checked

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.

Nota: Un efecte anàleg, però basat en la pseudo-classe :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

 

Document Tags and Contributors

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