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à ^^