Quando in classe tratto l’argomento form, mi soffermo sulle possibilità di personalizzazione che i diversi input hanno. Lo scopo di un buon web designer è infatti quello di integrare al meglio questi elementi all’interno della grafica del sito, mantenendo un certo grado di coerenza ed originalità.
Nel stilizzare con il CSS ci si accorge subito però che gli elementi più ostici su cui lavorare sono i checkbox e i radio button. Questi input infatti non permettono così facilmente di essere personalizzati, obbligandoci spesso ad utilizzare la grafica offerta dal nostro browser.
Lo scopo di questa pillola è quello di mostrarvi come poter prendere in mano il pieno controllo dell’aspetto grafico di questi elementi. Tutto questo facendo uso del solo CSS3 e le sue interessanti proprietà e selettori. Quindi niente JavaScript in questo caso.
Partiamo subito con il tutorial.
La struttura HTML
Prima di tutto vediamo come strutturare a livello HTML il nostro input. Questo aspetto è importante per poter selezionare perfettamente gli elementi nel CSS. Per comodità mi concentrerò sul checkbox, ma l’esempio del radio button è quasi uguale (e lo troverete comunque disponibile al link di esempio a fine articolo).
<!-- Struttura Checkbox -->
<label class="checkbox-wrapper">Check 1
<input type="checkbox" name="check">
<span class="checkmark"></span>
</label>Come potete vedere qui sopra, la prima cosa importante da fare è inserire l'<input> all’interno del suo <label>. Questa soluzione porta con se un altro beneficio: evita l’uso dell’accoppiata di attributi for/id per connettere input ed etichetta tra loro.
Oltre a questo, potete notare la presenza di un’altro elemento “.checkmark”. Questo elemento farà le veci dell’elemento grafico di input. Non essendo possibile formattare l’input direttamente, dovremo nasconderlo e “sostituirlo” con questo <span>.
N.B.: Ovviamente nell’esempio sopra c’è un solo input per tipo, ma voi sentitevi liberi di mettere più opzioni.
Formattiamo ora gli input
Ora che abbiamo predisposto il nostro HTML, possiamo passare alla parte grafica, e quindi il CSS. La prima cosa da fare è impostare l’aspetto grafico di base del nostro input. Di seguito le regole CSS necessarie a questo scopo.
/* Personalizzo il label e quindi il contenitore dell'input */
.checkbox-wrapper {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Nascondo il checkbox di base del browser */
.checkbox-wrapper input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* creo il mio checkbox */
.checkbox-wrapper .checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eeeeee;
border: 3px solid transparent;
}
/* Creo la spunta all'interno dell'input (inizialmente nascosta) */
.checkbox-wrapper .checkmark::after {
content: "";
position: absolute;
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid #2196F3;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
display: none;
}Per prima cosa, vado a predisporre il contenitore (che nel nostro caso è il label) formattando l’etichetta ma applicando anche 2 proprietà fondamentali: position:relative;, che ci servirà per posizionare il nostro checkbox “custom” e user-select:none; per evitare che questo elemento sia selezionabile come testo. Applico anche del padding-left per far posto all’input personalizzato che andrò a creare successivamente.
Fatto questo, passiamo a nascondere il normale input, annullando le dimensioni dell’input e a portando l’opacità a 0.
Mi occupo poi di formattare il mio “nuovo” input (.checkmark), e lo posiziono in maniera assoluta all’inizio del mio contenitore/etichetta (dove avevo creato dello spazio precedentemente con il padding).
Creo infine la “spunta” all’interno del mio nuovo checkbox, e per farlo mi avvango del pseudoelemento ::after. Quest’elemento inizialmente sarà nascosto (display:none;) e provvederò a mostrarlo solo quando sarà selezionato quell’input.
Gestiamo ora le interazioni
Anche se l’input standard è stato “nascosto”, il fatto che sia all’interno del <label> fa si che venga comunque selezionato facendo un click sull’input “custom” o sull’etichetta stessa.
Dobbiamo quindi gestire graficamente le interazioni con questo input cioè decidere come cambierà il nostro nuovo input quando l’utente ci passerà sopra e soprattuto quando l’utente lo selezionerà o deselezionerà. Ecco qui il codice CSS necessario:
/* Quando vado sopra con il mouse (opzionale) */
.checkbox-wrapper:hover input ~ .checkmark {
background-color: #cccccc;
}
/* Quando l'input è selezionato, coloro il bordo dell'input */
.checkbox-wrapper input:checked ~ .checkmark {
border-color: #2196F3;
}
/* Quando l'input è selezionato mostro la spunta */
.checkbox-wrapper input:checked ~ .checkmark::after {
display: block;
}Nell’esempio qui sopra, gestisco quando seleziono l’input ma anche quando ci vado sopra. Quest’ultima interazione non è obbligatoria.
Leggendo il codice qui sopra può saltare all’occhio un elemento che non si usa spesso: la tilde (~). Con l’evoluzione dei selettori CSS3 è stato introdotto anche questo simbolo che serve ad indicare la selezione degli elementi adiacenti (fratelli) all’input.
N.B.: Per creare la tilde con la vostra tastiera potete usare la combinazione di tasti ALT+1 2 6 su Windows, OPTION+5 su Mac e ALT+ì su LINUX.
Il risultato finale è quello che potete vedere qui sotto:
E con questo è tutto. Vedete quindi che siamo riusciti a formattare a nostro piacimento il checkbox senza ricorrere ad una sola riga di JavaScript. Utile vero? Vi lascio a questo link il Codepen con l’esercizio completo anche della formattazione dell’altro elemento, il radio-button.
Ancora nessun commento