:checked

label,
input[type="submit"] {
 display: block;
 margin-top: 1em;
}
input:checked {
 border: none;
 outline: 2px solid deeppink;
}

<form>
 <p>Comment avez-vous entendu parler de nous ?</p>
 <label
 ><input name="origin" type="radio" value="google" checked /> Google</label
 >
 <label><input name="origin" type="radio" value="facebook" /> Facebook</label>
 <p>Veuillez accepter nos conditions :</p>
 <label
 ><input name="newsletter" type="checkbox" checked /> Je souhaite m'abonner à
 une newsletter personnalisée.</label
 >
 <label
 ><input name="privacy" type="checkbox" /> J'ai lu et j'accepte la Politique
 de confidentialité.</label
 >
 <input type="submit" value="Soumettre le formulaire" />
</form>

Note : Les navigateurs considèrent souvent les éléments <option> comme des éléments remplacéset la possibilité de mise en forme avec :checked varie d'un navigateur à l'autre.

:checked {
 /* ... */
}

<div>
 <input type="radio" name="my-input" id="yes" />
 <label for="yes">Oui</label>
 <input type="radio" name="my-input" id="no" />
 <label for="no">Non</label>
</div>
<div>
 <input type="checkbox" name="my-checkbox" id="opt-in" />
 <label for="opt-in">Cochez-moi !</label>
</div>
<select name="my-select" id="fruit">
 <option value="opt1">Pommes</option>
 <option value="opt2">Raisins</option>
 <option value="opt3">Poires</option>
</select>

div,
select {
 margin: 8px;
}
/* Libellés pour les entrées cochées */
input:checked + label {
 color: red;
}
/* Éléments radio cochés */
input[type="radio"]:checked {
 box-shadow: 0 0 0 3px orange;
}
/* Éléments cases à cocher cochés */
input[type="checkbox"]:checked {
 box-shadow: 0 0 0 3px hotpink;
}
/* Éléments options sélectionnés */
option:checked {
 box-shadow: 0 0 0 3px lime;
 color: red;
}

<input type="checkbox" id="expand-toggle" />
<table>
 <thead>
 <tr>
 <th>Colonne #1</th>
 <th>Colonne #2</th>
 <th>Colonne #3</th>
 </tr>
 </thead>
 <tbody>
 <tr class="expandable">
 <td>[plus de texte]</td>
 <td>[plus de texte]</td>
 <td>[plus de texte]</td>
 </tr>
 <tr>
 <td>[contenu de cellule]</td>
 <td>[contenu de cellule]</td>
 <td>[contenu de cellule]</td>
 </tr>
 <tr>
 <td>[contenu de cellule]</td>
 <td>[contenu de cellule]</td>
 <td>[contenu de cellule]</td>
 </tr>
 <tr class="expandable">
 <td>[plus de texte]</td>
 <td>[plus de texte]</td>
 <td>[plus de texte]</td>
 </tr>
 <tr class="expandable">
 <td>[plus de texte]</td>
 <td>[plus de texte]</td>
 <td>[plus de texte]</td>
 </tr>
 </tbody>
</table>
<label for="expand-toggle" id="expand-btn">Basculer les lignes masquées</label>

/* Masquer la case à cocher de basculement */
#expand-toggle {
 display: none;
}
/* Masquer le contenu extensible par défaut */
.expandable {
 visibility: collapse;
 background: #dddddd;
}
/* Style du bouton */
#expand-btn {
 display: inline-block;
 margin-top: 12px;
 padding: 5px 11px;
 background-color: #ffff77;
 border: 1px solid;
 border-radius: 3px;
}
/* Afficher le contenu masqué lorsque la case à cocher est cochée */
#expand-toggle:checked ~ * .expandable {
 visibility: visible;
}
/* Style du bouton lorsque la case à cocher est cochée */
#expand-toggle:checked ~ #expand-btn {
 background-color: #cccccc;
}

Help improve MDN

Cette page a été modifiée le ⁨9 nov. 2025⁩ par les contributeurs du MDN.