Hey,

Aujourd’hui je reviens avec un petit tip css dans le même goût que le précédent.

Cette fois-ci j’ai choisi de faire une checkbox customisée.

Sans plus attendre, voici le résultat:

La seule difficulté ici était d’utiliser un sélecteur css peu connu mais pourtant très utile: le sélecteur adjacent+“. Il se place entre 2 sélecteurs CSS et sélectionne le 2ème s’il est placé à la même profondeur que le premier et le suit directement.

Par exemple:

1
2
3
4
5
<label class="checkbox">
<input type="checkbox">
<span class="checkbox-item"></span>
<span class="checkbox-label">Checkbox label</span>
</label>

Le span.checkbox-item est adjacent à l’input[type=checkbox], il est donc sélectionné et peut être stylisé en fonction du premier (checked, disabled …).


En vous inspirant de cela, seriez-vous capable de faire la même chose avec l’input[type=radio] ?

Proposez-moi vos solutions en commentaires ou via le formulaire de contact, je donnerai ma solution bientôt.