Cos’è un toggle checkbox?
Si tratta di un semplice checkbox che, realizzato con i nuovi selettori CSS3, appare simile ad un interruttore.
In pratica, invece di avere, come risultato finale, un box in cui inserire una spunta avremo l’impressione di avere uno slider con due stati che simulano lo stato di on e off.
Ma andiamo alla pratica
il codice HTML è semplicissimo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Toggle checkbox</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <h1>Pulsanti CSS3 Toggle checkbox </h1> <form action="#" method="get"> <div> <input type="checkbox" id="click1" name="click1" class="click" /> <label for="click1"> click</label> </div> <div> <input type="checkbox" id="click2" name="click2" class="click" checked="checked" /> <label for="click2">Fai click</label> </div> <div> <input type="checkbox" id="click3" name="click3" class="click" /> <label for="click3">Fai click anche qui</label> </div> </form> </div> </body> </html>
Come vedete abbiamo la classica struttura del checkbox, con un input ed una label, niente di più facile.
Il trucco è tutto nel CSS:
body
{
font-family: sans-serif;
font-weight: normal;
margin: 10px;
color: #555;
background-color: #eee;
}
form
{
margin: 40px 0;
}
div
{
clear: both;
margin: 0 50px;
}
input.click:empty
{
margin-left: -999px;
}
input.click:empty ~ label
{
position: relative;
float: left;
line-height: 1.6em;
text-indent: 4em;
margin: 0.2em 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.click:empty ~ label:before,
input.click:empty ~ label:after
{
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: ' ';
width: 3.6em;
background-color: #c33;
border-radius: 0.3em;
box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3);
-webkit-transition: all 500ms ease-in;
transition: all 500ms ease-in;
}
input.click:empty ~ label:after
{
width: 1.4em;
top: 0.1em;
bottom: 0.1em;
margin-left: 0.1em;
background-color: #fff;
border-radius: 0.15em;
box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.2);
}
input.click:checked ~ label:before
{
background-color: #393;
}
input.click:checked ~ label:after
{
margin-left: 2.1em;
}*/
See the Pen Pulsanti toggle checkbox by Eugenio (@rupertone) on CodePen.0
Lo stile è più complesso rispetto ai checkbox che conosciamo bene ma garantisce un risultato estetico molto gradevole.
Il “trucco” è abbastanza semplice:
- all’inizio nascondiamo il checkbox con margin-left: -999px;
- posizioniamo le label o etichette
- diamo lo stile del toggle con i pseudo-selettori :before e :after (se volete approfondire il tema, questa è una guida interessantissima)
Forse abbiamo impiegato qualche minuto in più rispetto alla realizzazione di un checkbox classico ma l’effetto ottenuto ci ripaga della fatica 😉
