Aujourd’hui, retour dans le monde des CSS.
Ce dont j’ai décidé de parler cette semaine est une manière de créer un interrupteur comme ci-dessous :
Le HTML
Concernant le HTML derrière cet interrupteur, c’est un input de type checkbox qui se cache dessous.
Cet input, caché en CSS, est englobé dans un label
, avec un span
à ses côtés. C’est le clic sur le label qui permettra de cocher/décocher la checkbox.
< label class = "toggle" > < input class = "toggle-checkbox" type = "checkbox" /> < span class = "toggle-switch" ></ span > </ label > |
Ce span servira à créer le fond de l’interrupteur, tandis que son pseudo-element ::before
servira à créer l’élément mobile. Le style de ces deux éléments sera changé selon l’état de la checkbox, en utilisant la pseudo-classe :checked
.
Le CSS
D’abord, on cache la checkbox :
.toggle-checkbox { display : none ; } |
Ensuite on rajoute des arrondis au fond de l’interrupteur et à sa partie mobile :
.toggle-switch { display : inline-block ; position : relative ; width : 30px ; height : 16px ; background-color : #cacaca ; border-radius : 8px ; } .toggle-switch::before { content : "" ; background-color : #ffffff ; position : absolute ; height : 12px ; width : 12px ; border-radius : 50% ; top : 2px ; left : 4px ; } |
Il ne reste plus qu’à créer les styles pour quand la case est cochée :
.toggle-checkbox:checked + .toggle-switch { background-color : #028ddd ; } .toggle-checkbox:checked + .toggle-switch::before { left : 14px ; } |
Et voilà ^^
tous les exemples de switchs sont avec un deplacement horizontal. Comment faire43 avec un deplacement vertical ?
perci
Bonjour,
Pour rendre ce switch vertical, il faut :
– définir les dimensions de l’objet avec la classe « toggle-switch » de manière à ce qu’il soit plus haut que large
– redéfinir en conséquence la position du ::before
– pour la position activée, c’est le « top » qu’il faudra alors modifier