Come stilizzare checkbox e radio button in CSS3

Impariamo a personalizzare completamente la grafica di checkbox e radio button utilizzando il solo CSS3 e senza scrivere 1 riga di JavaScript.

10 Marzo 2020 Gianni Burei pillole formative, web

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.

Link esercizio completo

8 commenti

Io ho questo codice che è esattamente quello che hai anche tu qui sotto, come formatto il checkbox, solo quello?

Non vedo il codice, ma non ho capito bene qual è il tuo scopo? vuoi formattare solo il checkbox e quindi non il radio button o vuoi formattare una singola parte del checkbox?

Il codice è esattamente quello che hai tu nel checkbox qui sotto, con Safari ho selezionato l’area e ho cliccato su ispeziona elemento, l’avevo postato, ma non l’ha inserito nel commento, provo anche adesso. Si voglio formattare solo il quadratino checkbox.

Succede perchè nei commenti non è consentito inserire codice HTML, per ragioni di sicurezza. Premesso che il vero checkbox viene nascosto (in quanto non è possibile formattarlo), il quadratino è rappresentato dall’elemento “.checkmark”. Se invece vuoi formattare la spunta al suo interno, devi selezionare il pseudoelemento “.checkmark::after”

Verifica che la struttura HTML e CSS siano identiche (basta poco perchè qualcosa salti). E occhio che anche la posizione degli elementi è fondamentale. Se può aiutarti, puoi copiare il codice che trovi su Codepen (il link a fine articolo). Così vedi anche il codice all’opera.

Come ti dicevo è lo stesso identico codice checkbox che hai tu visto che entrambi usiamo WordPress. Vorrei evidenziare un pò il quadrato, sembra invisibile.

Occhio che non sia disabilitato o ci sia qualche altra regola CSS che sovrascriva le precedenti. In altro modo non posso aiutarti senza vedere effettivamente il codice. Mi dispiace.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *