Advertisement
  1. Web Design
  2. CSS

Suggerimento rapido: semplici checkbox e pulsanti radio con CSS3

by
Read Time:6 minsLanguages:

Italian (Italiano) translation by Fabio Pantano (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:

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.

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.

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.

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.

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 sheetOur sprite sheetOur 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.

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!

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 selectorsCan I use data for pseudo selectorsCan I use data for pseudo selectors
Report Can I Use per gli pseudo selettori generali
IE9 on Windows 7IE9 on Windows 7IE9 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:

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:

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:

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.