Clase pseudo CSS :checked
La pseudo-clase :checked se utiliza para seleccionar elementos cuando están en el estado seleccionado. Solo se aplica a los elementos <a href="/learn-html/html-input-tag.html"><code><input></code></a> (solo para botones de opción y casillas de verificación) y <a href="/learn-html/html-option-tag.html"><code><option></code></a>.
Los elementos de casilla de verificación y botón de opción pueden activarse o desactivarse por el usuario.
Versión
Sintaxis
Ejemplo de sintaxis de CSS :checked
:checked {
css declarations;
}En el siguiente ejemplo, marca la casilla de verificación para ver cómo funciona.
Ejemplo del selector :checked con la etiqueta <a href="/learn-html/html-div-tag.html"><code><div></code></a>:
Ejemplo de código CSS :checked
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin: 10px;
font-size: 20px;
}
input:checked + label {
color: #000;
}
input[type="radio"]:checked {
box-shadow: 0 0 0 4px #8ebf42;
}
/* Checkbox element, when checked */
input[type="checkbox"]:checked {
box-shadow: 0 0 0 3px #1c87c9;
}
</style>
</head>
<body>
<h2>:checked selector example</h2>
<div>
<input type="radio" name="my-input" id="yes" />
<label for="yes">Yes</label>
<input type="radio" name="my-input" id="no" />
<label for="no">No</label>
</div>
<div>
<input type="checkbox" name="my-checkbox" id="opt-in" />
<label for="opt-in">Check!</label>
</div>
</body>
</html>Ejemplo del selector :checked con las etiquetas <a href="/learn-html/html-table-tag.html"><code><table></code></a>, <a href="/learn-html/html-tr-tag.html"><code><tr></code></a>, <a href="/learn-html/html-th-tag.html"><code><th></code></a>, <a href="/learn-html/html-td-tag.html"><code><td></code></a>:
Ejemplo de imitación de clic CSS :checked
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,tr,th,td {
border: 1px solid #ccc;
text-align: center;
border-collapse: collapse;
padding: 8px;
}
#toggle {
display: none;
}
.expandable {
visibility: collapse;
background: #1c87c9;
}
#btn {
display: inline-block;
margin-top: 15px;
padding: 10px 20px;
background-color: #8ebf42;
color: #fff;
cursor: pointer;
border-radius: 3px;
}
#toggle:checked ~ * .expandable {
visibility: visible;
}
#toggle:checked ~ #btn {
background-color: #ccc;
}
</style>
</head>
<body>
<h2>::checked selector example</h2>
<input type="checkbox" id="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>[text]</td>
<td>[text]</td>
<td>[text]</td>
</tr>
<tr class="expandable">
<td>[more text]</td>
<td>[more text]</td>
<td>[more text]</td>
</tr>
<tr>
<td>[text]</td>
<td>[text]</td>
<td>[text]</td>
</tr>
<tr class="expandable">
<td>[more text]</td>
<td>[more text]</td>
<td>[more text]</td>
</tr>
</tbody>
</table>
<label for="toggle" id="btn">Click here!</label>
</body>
</html>Ejemplo del selector :checked:
Ejemplo de la clase pseudo CSS :checked:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input[type=checkbox] {
vertical-align:middle;
}
input[type=checkbox] + label {
color: #999999;
font-style: normal;
}
input[type=checkbox]:checked + label {
color: #8ebf42;
font-style: italic;
font-weight:bold;
}
</style>
</head>
<body>
<h2>:checked selector example</h2>
<form>
<input type="checkbox" id="css" name="css" />
<label for="css">Here is CSS example.</label>
</form>
</body>
</html>Por lo tanto, la pseudo-clase :checked se puede utilizar para hacer los formularios más accesibles y crear widgets interactivos con entradas ocultas y sus etiquetas visibles.
Práctica
¿Cuál es la función de la pseudo-clase ':checked' en CSS?