Le checkbox sono un elemento fondamentale nei web form, spesso associate al passaggio di accettazione dei termini & condizioni di un servizio, costituendo quindi un elemento obbligatorio per il perfezionamento di una registrazione o di un acquisto.
L’elemento HTML <input type="checkbox"> appartenendo alla famiglia degli elementi form ha il vantaggio/svantaggio di essere stilizzato e gestito diversamente a seconda del sistema operativo e browser in cui viene visualizzato, ciò comporta un certo grado di difficoltà nel modificarne l’aspetto via CSS, ottenendo risultati disomogenei.
Il fatto che l’elemento assuma un aspetto conforme ad altri simili al sistema che sta usando il visitatore è un vantaggio in quanto si configura come un elemento familiare, già conosciuto, dal comportamento prevedibile, ma in ambito mobile possono servire degli accorgimenti lato CSS per rendere l’elemento più facile da selezionare.
Il problema insorge in presenza di link ipertestuali nelle vicinanze della checkbox, in questo caso il sistema di approssimazione del tocco su un touchscreen preferisce spesso i link rispetto alla checkbox, con l’effetto indesiderato di rendere molto difficoltosa l’espressione della scelta da parte dell’utente, e purtroppo l’utilizzo della proprietà padding non comporta l’ingradimento dell’area invisibile circostante alla checkbox.
Il tag label e l’attributo for
Il modo migliore per ingrandire l’area interattiva della checkbox è utilizzare un tag label, apponendo all’attributo for un valore equivante all’atributo ID della checkbox, che può contenerla annidata al suo interno oppure essere visivamente sovrapposta. Questo approccio permette di stilizzare liberamente l’area della label ingrandendola a piacimento, con il vantaggio che in qualunque punto si seleziona al suo interno innescherà il cambiamento sulla checkbox a cui fa riferimento.
Pseudo contenuto CSS
Per rendere l’operazione ancora più semplice si potrebbe preferire di inserire tutto il contenuto all’intero del tag label, in modo che cliccando su qualunque parte del messaggio la checkbox venga attivata, in tal caso non sarà possibile ingrandire la label in modo indipendente, ma si può ricorrere ad uno pseudo elemento CSS :before.
Nonostante si tratti di pseudo contenuto, è comunque un contenuto dell’elemento label e in quanto tale provocherà il cambiamento della checkbox attraverso l’attributo for quando selezionato.
Effettivamente pensare anche a chi ha delle ditone grandi non è da poco, visto comunque che i dispositivi si rimpiccioliscono…