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.

Article suivant

z-web-components
Article précédent

material input sans js