Un des problèmes que l'on rencontre assez tôt lorsque l'on travaille sur le CSS et l'impossibilité de styliser certains éléments de formulaire comme les cases à cocher ou les radios. Aussi, si vous souhaitez créer une interface spécifique pour ce type de champs il va falloir être créatif et contourner le problème.
La solution consiste à utiliser les pseudo-élément ::before et ::after afin de créer des éléments virtuels qui vont venir remplacer l'interface de notre case à cocher. On gardera cependant l'input original dans la structure HTML afin de ne pas nuire à l'accessibilité.
<div class="form-check">
<input type="checkbox" id="cgv" name="cgv">
<label for="cgv">
J'accepte les conditions générales de vente
</label>
</div>La structure HTML est relativement classique et on utilisera le sélecteur voisin afin de changer l'apparence d'un pseudo-élément lorsque la case est cochée ou lorsqu'elle là le focus.
/* Au checked */
.form-check input:checked + label::before { }
/* Au focus */
.form-check input:focus + label::before { }À vous ensuite d'être créatif sur l'apparence que vous souhaitez donner à vos éléments. Faites cependant attention à ne pas trop diverger du style initial ;)
