Les cases à cocher peuvent être facilement personnalisées en CSS. Vous pouvez modifier leurs couleurs, formes, dimensions et ajouter des animations. Voici un exemple de base de comment procéder:
HTML:
```
```
CSS:
```
/* Cacher la case à cocher par défaut */
.custom-checkbox input {
display: none;
}
/* Style de la case à cocher personnalisée */
.custom-checkbox .checkmark {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
background: #eee;
}
/* Style de la case à cocher personnalisée quand elle est cochée */
.custom-checkbox input:checked ~ .checkmark {
background: #2196F3;
}
/* Style du signe de coche (✓) */
.custom-checkbox .checkmark:after {
content: “”;
position: absolute;
display: none;
}
/* Style du signe de coche (✓) quand la case est cochée */
.custom-checkbox input:checked ~ .checkmark:after {
display: block;
}
/* Style et position du signe de coche (✓) */
.custom-checkbox .checkmark:after {
left: 7px;
top: 3px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
```
Dans cet exemple, nous avons caché la case à cocher par défaut en utilisant `display: none`. Puis, nous avons créé une nouvelle case à cocher avec une balise `` et nous avons défini son style.
Nous avons également ajouté une coche en utilisant les pseudos-éléments `::after` et `::before` et nous l’avons mis invisible par défaut en utilisant `display: none`. Ensuite, nous l’avons rendu visible lorsque la case à cocher est cochée en utilisant l’ensembleur `:checked` et `display: block`.
Notez que le style, les dimensions, les couleurs et même les animations que vous pouvez ajouter à votre case à cocher personnalisée dépendent entièrement de vos besoins et de votre créativité.
