Pseudo-classe CSS :checked
La pseudo-classe :checked est utilisée pour sélectionner des éléments lorsqu’ils sont dans l’état sélectionné. Elle ne concerne que les éléments <input> (uniquement pour les boutons radio et les cases à cocher) et <option>.
Les éléments de type case à cocher et bouton radio peuvent être activés et désactivés par l’utilisateur.
Version
Syntaxe
Exemple de syntaxe CSS :checked
:checked {
css declarations;
}Dans l’exemple suivant, cochez la case pour voir comment cela fonctionne.
Exemple du sélecteur :checked avec la balise <div> :
Exemple de code 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>Exemple du sélecteur :checked avec les balises <table>, <tr>, <th>, <td> :
Exemple d’imitation 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>Exemple du sélecteur :checked :
Exemple de la pseudo-classe 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>Ainsi, la pseudo-classe :checked peut être utilisée pour rendre les formulaires plus accessibles et pour créer des widgets interactifs avec des entrées masquées et leurs étiquettes visibles.
Practice
What is the function of the ':checked' pseudo-class in CSS?