Suggerimento rapido: semplici checkbox e pulsanti radio con CSS3

() translation by (you can also view the original English article)

Ti sei mai chiesto come personalizzare le caselle checkbox e i pulsanti radio senza JavaScript? Con CSS3 è possibile! Ecco quello che andremo a realizzare:

Se siete in cerca di alcuni elementi grafici da utilizzare con elementi UI del vostro form, potete dare un'occhiata ai kit UI disponibili su Envato Elements. In caso contrario, prendete una tazza di caffè e procedete con questo tutorial!

1. Comprendere il processo

Lettura consigliata: 30 selettori CSS da memorizzare

Per quelli di voi già abili con i CSS e vogliono solo una piccola spinta nella giusta direzione, ecco la linea CSS più importante dell'intero tutorial:

1	input[type="checkbox"]:checked + label {
2
3	}

Ora, per quelli di voi che devono essere instradati nella giusta direzione, procedete nella lettura senza paura!

OK, ora torniamo al tema centrale. Che cosa fa esattamente? Beh, con quel piccolo ed elegante pseudo selettore :checked, siamo in grado di puntare a un elemento in base al relativo stato selezionato (o deselezionato). Poi possiamo usare il selettore CSS 2.1 adiacente di pari livello + per puntare direttamente all'elemento accanto alla casella checkbox o al pulsante radio, che nel nostro caso è l'etichetta.

2. Impostare l'HTML

Ora, iniziamo a creare i nostri file HTML e CSS (o come gestisci i tuoi stili) e procediamo con il lavoro. Darò per scontato che sappiate come farlo, quindi non entreremo nel merito.

Per proseguire nella giusta strada, vi mostrerò questa tecnica solo su una casella checkbox, ma il processo per i pulsanti radio è identico ed è incluso nel codice.

OK, cominciamo? Iniziamo creando il nostro input checkbox, seguito da un'etichetta.

1	<input type="checkbox" />
2	<label>Styled Check Box</label>

Ora, nel caso in cui non conosciate bene l'elemento <label>, è necessario collegare l'input e l'etichetta, in modo tale da poter interagire con l'input attraverso l'etichetta. Questo è possibile con for= "" e l'ID dell'input.

1	<input type="checkbox" id="c1" name="cc" />
2	<label for="c1">Check Box 1</label>

Aggiungo anche uno <span> all'interno dell'etichetta, il quale è più una personale preferenza, ma tutto diventerà chiaro qui di seguito.

3. Per cosa siamo qui: CSS

Ora inizia il divertimento. La prima cosa che facciamo, che sta alla base di questo tutorial, è nascondere la casella checkbox.

1	input[type="checkbox"] {
2	display:none;
3	}

A questo punto, possiamo applicare uno stile all'etichetta, più specificamente all'elemento span dell'etichetta. In questo modo si potrà avere un maggior controllo sulla posizione esatta della casella checkbox. Senza di esso si andrebbe probabilmente a usare un'immagine di sfondo direttamente sull'etichetta, complicando però il posizionamento.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    background:url(check_radio_sheet.png) left top no-repeat;
}

OK, vediamo di spiegarlo rapidamente. Prima di tutto, notare lo sfondo. Ho una piccola immagine sprite, quindi tutto quello dovrete fare è impostare la posizione di sfondo sull'elemento. L'elemento span ha la stessa larghezza e l'altezza di ogni "sprite" nell'immagine, il che lo rendo facile da definire per ciascuno stato.

Our sprite sheet — La nostra immagine per lo sprite

Ecco il resto dei CSS, specifico per il mio stile. Questo è puramente estetico e specifico a mio gusto o per questo design.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

4. Rendiamolo funzionale

Ci manca poco per concludere, quindi vediamo di portare a termine il lavoro. L'ultima cosa che dovrete fare è fornire uno stato per l'elemento quando l'input viene selezionato ed eventualmente anche quando si passa sopra con il mouse. E' abbastanza semplice, vediamo come fare!

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Si noti che siccome ho usato un'immagine sprite, tutto quello che dovrò fare è cambiare la posizione dello sfondo. Inoltre, per definire lo stile dell'elemento span dell'etichetta quando la casella checkbox o il pulsante radio è "spuntato", si usa lo pseudo selettore CSS3: :checked.

Piccola nota sulla compatibilità browser

Gli pseudo selettori hanno una buona compatibilità su tutti i browser, cliccare sul link sotto l'immagine per aggiornare il report seguente:

Can I use data for pseudo selectors — Report Can I Use per gli pseudo selettori generali

IE9 on Windows 7 — Riscontro: IE9 su Windows 7

Il supporto al selettore :checked dei primi browser mobile è anch'esso incerto. Per esempio Safari Mobile per iOS 6 non è supportato.

Conclusione

OK, abbiamo finito, giusto? Beh facciamo un doppio controllo. Prima il codice HTML:

1	<input type="checkbox" id="c1" name="cc" />
2	<label for="c1"><span></span>Check Box 1</label>

Il vostro è lo stesso? Non dimenticate di aggiungere l'elemento <span>! Quando sperimentate con il vostro codice, consiglio vivamente di trovare nuovi o diversi modi per gestire questa parte. Mi piacerebbe vedere come lo renderete più efficiente. Ora il CSS:

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Messo tutto? Perfetto. Tenete a mente che una buona parte di questo stile è specifico per lo stile creato sui file demo. Vi incoraggio di crearne uno proprio sperimentando sul posizionamento e sulla presentazione.

In conclusione, la cosa più importante da capire in questo tutorial è la prima riga CSS che ho scritto all'inizio:

1	input[type="checkbox"]:checked + label {
2
3	}

Il suo utilizzo può coprire una serie di cose diverse. Le possibilità con :checked vanno oltre le caselle checkbox e i pulsanti radio nei form. Vi lascio un paio di spunti su cui sperimentare:

Aggiungere un immagine sprite 2x per gli schermi retina
Usare una SVG anziché una bitmap

Spero vi sia piaciuto questo breve articolo e spero espanderete e migliorerete ciò che avete appreso!