Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

:checked

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

Resumen

La pseudo-clase de CSS :checked representa cualquier radio (<input type="radio">), checkbox (<input type="checkbox">) o option (<option> en un <select>) elementos que son comprobados cuando presionados a un estado de "encendido". El usuario puede cambiar su estado al presionar el elemento, o seleccionando un valor diferente, en su caso la pseudo-clase :checked no aplicaria más al elemento, pero sera para el relevante.

Syntaxis

elemento:checked { propiedades de estilo }

Ejemplos

Selectores de ejemplo

/* cualquier elemento "checkable" */
:checked {
  width: 50px;
  height: 50px;
}

/* solo elementos de tipo radio */
input[type="radio"]:checked {
  margin-left: 25px;
}

/* solo elementos de tipo checkbox */
input[type="checkbox"]:checked {
  display: none;  
}

/* solo elementos de tipo option */
option:checked {
  color: red;
}
input[type="radio"]:checked
Representa todos los botones tipo radio en la pagina que estan seleccionados
input[type="checkbox"]:checked
Representa todos los checkboxes en la pagina que estan seleccionados
option:checked
Representa todos las opciones select en la pagina que estan seleccionados

Usando hidden checkboxes para poder almacenar algunos valores CSS booleanos 

La   pseudo-clase :checked aplicada a chekboxes ocultos justo al iinicio de tu pagina puede ser empleados para almacenar algunos valores booleanos dinamicos para ser usados como reglas CSS. El siguiente ejemplo muestra como ocultar/mostrar algunos elementos desplegables simplemente presionando un boton (download this demo).

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Expandable elements</title>
<style type="text/css">
#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;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
    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;
    -moz-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;
    -webkit-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;
    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>

Using hidden radioboxes in order to store some CSS boolean values

You can also use the :checked pseudo-class applied to hidden radioboxes in order to build, for example, an image gallery with full-size images shown only when mouse clicks on previews. See this demo for a possible cue.

Note: For an analogous effect, but based on :hover pseudo-class and without hidden radioboxes, see this demo, taken from the :hover page.

Specifications

Specification Status Comment
WHATWG HTML Living Standard
The definition of ':checked' in that specification.
Living Standard No change.
HTML5
The definition of ':checked' in that specification.
Recommendation Defines the semantic regarding HTML.
Selectors Level 4
The definition of ':checked' in that specification.
Working Draft No change.
CSS Basic User Interface Module Level 3
The definition of ':checked' in that specification.
Working Draft Link to Selectors Level 3.
Selectors Level 3
The definition of ':checked' in that specification.
Recommendation Defines the pseudo-class, but not the associated semantic

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 9.0 9.0 3.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 1.0 (1.0) 9.0 9.5 3.1

 

Etiquetas y colaboradores del documento

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