Personnaliser des checkbox en CSS

Voir la vidéo

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 ;)

Publié
Technologies utilisées
Auteur :
Grafikart
Partager