Html switch (checkbox) in CSS

Un esempio basato su HTML 5 e CSS che permette di ridefinire l'aspetto di un controllo checkbox.

Controllo base

Si parte da questo HTML

HTML: SwitchCopia

<label class="switch">
  <input type="checkbox">
  <span></span>
</label>

a cui va aggiunto questo CSS

CSS: SwitchCopia

.switch {
    --sgart-switch-width: 45px; /* larghezza del controllo */
    --sgart-switch-height: calc(var(--sgart-switch-width) / 2); /* l'altezza è la metà della larghezza */
    --sgart-switch-gap: calc(var(--sgart-switch-height) *.15); /* dimensione del pallino interno */
    --sgart-switch-background: #888; /* colore sfondo normale/off grigio */
    --sgart-switch-background-on: #628320; /* colore sfondo on/checked */
    --sgart-switch-circle: #fff; /* colore pallino interno off */
    --sgart-switch-circle-on: #fff; /* colore pallino interno on */

    position: relative;
    display: inline-flex;
    width: var(--sgart-switch-width);
    height: var(--sgart-switch-height);
    border-radius: calc(var(--sgart-switch-height)/2);
    margin: 0;
    padding: 0;
    transition-duration: 0.3s;
    cursor: pointer;
    overflow: hidden;
}

.switch>span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: 0;
    margin: 0;
    padding: 0;
    background-color: var(--sgart-switch-background);
}

.switch>input {
    display: block;
    position: absolute;
    top: var(--sgart-switch-gap);
    left: var(--sgart-switch-gap);
    appearance: none;
    outline: none;
    user-select: none;
    width: calc(var(--sgart-switch-height) - var(--sgart-switch-gap) * 2);
    height: calc(var(--sgart-switch-height) - var(--sgart-switch-gap) * 2);
    border: 0;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background-color: var(--sgart-switch-circle);
    cursor: pointer;
    z-index: 1;
}
.switch>input:checked {
    left: unset;
    right: var(--sgart-switch-gap);
}

.switch>input:checked{
    background-color: var(--sgart-switch-circle-on);
}

.switch>input:checked+span {
    background-color: var(--sgart-switch-background-on);
}

il risultato finale è questo:

Versione grande

Per creare una versione più grande del controllo è sufficiente aggiungere una nuova classe CSS switch-big

HTML: Switch grandeCopia

<label class="switch switch-big">
  <input type="checkbox">
  <span></span>
</label>

in cui si va a ridefinire solo la variabile CSS --sgart-switch-width

CSS: Switch grandeCopia

.switch.switch-big {
    --sgart-switch-width: 200px; /* larghezza del controllo */
}

questo è il risultato

Versione rettangolare

Oppure si può generare una versione rettangolare aggiungendo una nuova classe switch-rect

HTML: Switch rettangolareCopia

<label class="switch switch-big">
  <input type="checkbox">
  <span></span>
</label>

in cui si va a impostare la variabile CSS --sgart-switch-radius a 0

CSS: Switch rettangolareCopia

.switch.switch-big {
    --sgart-switch-radius: 0;
}

questo è il risultato

Cambio colori

Sempre aggiungendo una nuova classe switch-color

HTML: Switch coloriCopia

<label class="switch switch-color">
  <input type="checkbox">
  <span></span>
</label>

e poi ridefinendo alcune variabili nel CSS

CSS: Switch coloriCopia

.switch.switch-color {
    --sgart-switch-width: 80px;
    --sgart-switch-height: calc(var(--sgart-switch-width) / 3);
    --sgart-switch-gap: 0px;  /* va indicata l'unità di misura */
    --sgart-switch-radius: 0;
    --sgart-switch-background: #050;
    --sgart-switch-background-on: #500;
    --sgart-switch-circle: #F00;
    --sgart-switch-circle-on: #0f0;
    border: 1px solid #ccc;
}

posso ottenere questo risultato