Categoria:

Checkbox con CSS3

06/01/2014 21:10 Pubblicato da
Share on FacebookTweet about this on TwitterGoogle+Share on Reddit

checkbox

In questo articolo spiegherò come creare un menu composto di checkbox utilizzando solo HTML e CSS3. In particolare presenterò due stili di checkbox, il primo ispirato ad iOS e il secondo a Windows Phone.

Demo CodePen Download

Per prima cosa definiamo il layout. Ogni classe .d-row contiene un tag di tipo label e un’altro di tipo input. Come vedremo dopo, l’ordine con cui si presentano l’input e il label è essenziale per la presentazione del nostro menu costituito di checkbox. Prestare particolare attenzione al tag span posizionato all’interno della label. Esso rappresenta la checkbox che andrà a sostituire quella di default del browser.

La classe .d-page è il box che racchiude tutti gli item del menu.

La classe .d-row rappresenta una riga del nostro menu. Essa è caratterizzata da un bordo inferiore e da una transizione, che fa sì che cambi il colore dello sfondo quando si posiziona il cursore del mouse sulla .d-row.

Il label assume una posizione relativa alla sua posizione normale. La proprietà user-select evita che l’utente possa selezionare involontariamente il testo.

Per ogni tag di tipo label, aggiungiamo come contenuto una stringa vuota e definiamo la sua posizione come absolute e il tipo di box (block).

Nascondiamo la checkbox di default e la posizioniamo nella parte destra della classe .d-row.

Quando la checkbox è stata selezionata per entrambe le tipologie di checkbox, lo span:before, che come avevamo visto precedentemente è caratterizzato dal contenuto stringa vuota, deve spostarsi da sinistra di un certo numero di pixel. Il selettore CSS più (+) ci consente di selezionare il tag di tipo label che si trova subito dopo il tag di tipo input, quest’ultimo in particolare deve essere di tipo checked. Quindi in questo caso chiediamo di selezionare l’elemento la sezione che sta prima dello span (span:before – ovvero la stringa vuota), che si trova all’interno di una label, che a sua volta è successivo al tag input, il quale deve essere di tipo checked. Il tutto si deve trovare in un elemento che ha come classe la .checkbox-round oppure .checkbox-square.

Mentre prima abbiamo definito come deve essere rappresentata la sezione precedente allo span una volta che la checkbox è stata selezionata, in questo caso definiamo come dovrà presentarsi l’elemento span situato all’interno della label una volta che la checkbox è stata selezionata.

L’elemento span, per entrambe le tipologie di checkbox, dovrà avere una posizione relativa alla sua posizione normale e spostata a destra all’interno della label. Nel caso della .checkbox-round, i bordi dovranno essere arrotondati di 16px e quando verrà cliccato sulla checbox, dovrà partire una transizione dal background di colore rosso a quello verde.
Mentre la .checkbox-square avrà un bordo di 3 pixel e quando verrà attivata la checkbox, partirà una transizione del background dal bianco al verde. Questo stile si presenta quando la checkbox non è stata selezionata.

Lo span:before rappresenta la sezione che sta prima dell’elemento span. Graficamente è la circonferenza o il rettangolino interno alla checkbox. Entrambe le tipologie di checkbox sono caratterizzate da una transizione che fa riferimento allo spostamento a sinistra (transition: left).

Demo CodePen Download

21/07/2017 10:14

Leave a Reply

Your email address will not be published. Required fields are marked *