Checkbox click area improvement

Checkboxes and radio buttons originally always were quite small UI beasts.

I found a GOV.UK blog post about improving checkboxes and radios recently. They did an interesting usability finding – users don’t click on the titles – they usually click on the UI elements themselves. Now, that is interesting! It means we should make these small UI elements to be more friendly to clicking mistakes.

They suggested a nice UI control improvement and changed the look of the control. This new look performed better according to their usability tests, but what if you cannot afford or don’t want to change the look of the controls?

I wanted to share a little CSS trick I did to make checkbox, radios clickable area bigger without changing the size of actual controls. We will take advantage of CSS pseudo classes:

Hope it was useful, cheers!