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<label class="switch">
<input type="checkbox">
<span></span>
</label>
a cui va aggiunto questo
CSS.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:
Cambiando la variabile
CSS --sgart-switch-width si può aumentare o diminuire la dimensione del controllo mantenendo lo stesso
aspect ratio.
Versione grande
Per creare una versione più grande del controllo è sufficiente aggiungere una nuova classe
CSS switch-big<label class="switch switch-big">
<input type="checkbox">
<span></span>
</label>
in cui si va a ridefinire solo la variabile
CSS --sgart-switch-width.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<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
.switch.switch-big {
--sgart-switch-radius: 0;
}
questo è il risultato
Cambio colori
Sempre aggiungendo una nuova classe
switch-color<label class="switch switch-color">
<input type="checkbox">
<span></span>
</label>
e poi ridefinendo alcune variabili nel
CSS.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