Styliser une case à cocher à l'aide de CSS

Ce tutoriel présentera une méthode pour styliser une case à cocher en CSS.

Utilisez CSS pour styliser les cases à cocher

Une case à cocher est un élément HTML utilisé pour recueillir les informations de l’utilisateur et est utilisé dans presque tous les sites Web. Étant donné que la case à cocher par défaut fournie par le navigateur a la même apparence sur tous les autres sites, pourquoi ne pas les styliser ? Bien qu’il soit un peu compliqué de les styliser à l’aide de pseudo-éléments comme :before, :after, :hover et :checked, il est possible de styliser une case à cocher en utilisant CSS.

Pour appliquer un style aux cases à cocher, nous utiliserons uniquement HTML et CSS, sans bibliothèques supplémentaires. Cette méthode fonctionne bien dans les navigateurs modernes. Il peut y avoir de nombreuses approches en ce qui concerne le style des cases à cocher. Nous pouvons suivre ces principes simples pour atteindre notre objectif. Nous pouvons masquer le contrôle de case à cocher par défaut, qui est stylisé par le navigateur et ne peut pas être remplacé de manière significative à l’aide de CSS. Avec le contrôle caché, nous aurons toujours besoin de détecter et de basculer son état vérifié. Nous pouvons refléter l’état coché de la case à cocher en stylisant un nouvel élément.

Les principes ci-dessus peuvent être appliqués en utilisant différentes méthodes, et il n’y a pas une seule bonne ou mauvaise approche. Dans ce tutoriel, nous allons d’abord envelopper la case à cocher dans un élément div. Cela signifie que même si le contrôle de la case à cocher est masqué, nous pouvons toujours basculer son état coché en cliquant n’importe où dans le div. Ensuite, nous pouvons masquer la case à cocher et ajouter un nouvel élément après la case à cocher, que nous pouvons styliser en conséquence. L’élément doit apparaître après la case à cocher pour être sélectionné et stylisé en fonction de l’état :checked. La pseudo-classe en CSS est utilisée pour styliser un élément particulier définissant un état spécifique de l’élément. Ici, nous utilisons des pseudo-éléments. Le sélecteur :before insère quelque chose avant le contenu de chaque élément sélectionné. Le sélecteur :checked correspond à chaque élément <input> coché.

En HTML, la case à cocher se trouve dans la balise <label>. La fonction principale de l’élément <span> est de référencer la case à cocher plus tard à partir de CSS.

En CSS, la propriété display spécifie le comportement d’affichage (le type de boîte de rendu) d’un élément. Dans notre cas, il est défini sur none, ce qui supprime complètement l’élément <input> dans la balise <label>, c’est-à-dire notre case à cocher par défaut. Nous avons utilisé les propriétés height, width et border pour générer la case à cocher personnalisée. Les propriétés CSS height et width définissent la hauteur et la largeur d’un élément. La propriété CSS border permet de spécifier le style, la largeur et la couleur de la bordure d’un élément. La propriété display spécifie le comportement d’affichage. La valeur en ligne affichera l’élément comme en ligne. La propriété position spécifie les types de positionnement utilisés pour un élément pour définir notre nouvelle case à cocher.

Le pseudo-élément :before est utilisé pour insérer notre contenu avant l’élément <span>. Le sélecteur :checked correspond à chaque élément coché, ce qui signifie que lorsque notre case est cochée, un nouveau contenu sera injecté avant l’élément <span> puisque nous utilisons le sélecteur :before. Ceux-ci supportent la propriété content, qui permet d’injecter des icônes Unicode. La valeur de la propriété CSS content:'\2714' représente une icône de coche.

Exemple de code :

<label>
    <input type='checkbox'>
    <span></span>
    Click Me
</label>

label input {
    display: none; 
}

label span {
    height: 10px;
    width: 10px;
    border: 1px solid grey;
    display: inline-block;
    position: relative;
}

[type=checkbox]:checked + span:before {
    content: '\2714';
    position: absolute;
    top: -5px;
    left: 0;
}