Style checkboxes and radio buttons with CSS

Something that has always annoyed me is how inaccessible are most form elements like inputs, selects and so on. I was allays interested in finding ways of customizing them without JavaScript.
Before CSS3 there wasn't much you could do to form elements without JavaScript but now using some simple CSS3 tricks you can do some really cool stuff to them making a form element look and feel great when interacting with it.
Below I will show you an really basic example of how to manipulate input type checkbox and radio using just CSS.
The can be manipulated much more than that but in order not to have lots of CSS and make it harder for you to understand what's happening there I tried to make a simple design implementation.

Result Box
  • html
  • css

Share This:

Feel free to leave a comment!

You might alos be interested in: