--- url: 'https://simonerescio.it/2014/11/ux-per-ditoni-aumentare-area-tappabile-delle-checkbox' title: 'UX per ditoni, aumentare l’area tappabile delle checkbox' author: name: Simone Rescio url: 'https://simonerescio.it/chi-sono/' date: '2014-11-08T00:13:54+01:00' modified: '2026-04-22T00:36:50+02:00' type: post categories: - CSS tags: - CSS - mobile - usabilità image: 'https://simonerescio.it/wp-content/uploads/2014/11/fat_homer_lrg.gif' published: true --- # UX per ditoni, aumentare l’area tappabile delle checkbox 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 `` 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](https://www.456bereastreet.com/lab/form_controls/checkboxes/). 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’ingrandimento dell’area invisibile circostante alla checkbox. [![checkbox](https://simonerescio.it/wp-content/uploads/2014/11/checkbox-1024x327.png)](https://simonerescio.it/2014/11/ux-per-ditoni-aumentare-area-tappabile-delle-checkbox/checkbox) - [1. Il tag label e l’attributo for](#il-tag-label-e-l8217attributo-for) - [2. Pseudo contenuto CSS](#pseudo-contenuto-css) ## 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`](https://www.w3.org/TR/html4/interact/forms.html#adef-for) un valore equivalente 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.   [](https://mastodon.social/share?text=http%3A%2F%2Fsresc.io%2F2ID&title=UX%20per%20ditoni%2C%20aumentare%20l%27area%20tappabile%20delle%20checkbox)[](https://www.linkedin.com/sharing/share-offsite/?url=http%3A%2F%2Fsresc.io%2F2ID)[](https://simonerescio.it/2014/11/ux-per-ditoni-aumentare-area-tappabile-delle-checkbox)[](https://reddit.com/submit?url=http%3A%2F%2Fsresc.io%2F2ID&title=UX%20per%20ditoni%2C%20aumentare%20l%27area%20tappabile%20delle%20checkbox)[](https://api.whatsapp.com/send?text=UX%20per%20ditoni%2C%20aumentare%20l%27area%20tappabile%20delle%20checkbox http%3A%2F%2Fsresc.io%2F2ID)[](https://bsky.app/intent/compose?text=UX%20per%20ditoni%2C%20aumentare%20l%27area%20tappabile%20delle%20checkbox%20http%3A%2F%2Fsresc.io%2F2ID)[](https://telegram.me/share/url?url=http%3A%2F%2Fsresc.io%2F2ID&text=UX%20per%20ditoni%2C%20aumentare%20l%27area%20tappabile%20delle%20checkbox)[](https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsresc.io%2F2ID)