Last Updated: February 25, 2016
·
5.195K
· ipetepete

CSS Only Radio, Checkbox styles. Fat finger friendly ;)

I wanted a way to make some radios/checkboxes more touch friendly, without using image replacement and without doing display: none (for accessibility).

Full page: http://codepen.io/ipetepete/full/ulqGe

Code: http://codepen.io/ipetepete/pen/ulqGe

The technique uses the triggering behavior of the label to toggle the input elements which are hidden via an accessible technique learned from the formidable Jonathan Snook. The CSS provides the visual feedback/replacement inputs.

  • Not super sexy, but its just an experiment

Picture