CSS Library: Form CSS: CSS3 demos: Here
CSS3 oval switch checkboxes
Author: Dynamic Drive
Checkboxes can be ugly and unwieldy to interact with, especially on mobile devices where the thumb dwarfs the standard checkbox. CSS can be helpful here in issuing a complete makeover for the checkbox, transforming it into any alternate interface that's more attractive and intuitive to use. The checkbox remains fully functional as a form element. The key to this magical transformation starts with hiding the checkbox and making use of the label element instead to do the heavy lifting. Then, by styling the label element, we can let our imagination run wild in crafting the desired checkbox replacement look.
With the lengthy intro out of the way, the following uses CSS3 to create slick looking, oval shaped checkbox replacement switches. Refer to the comments to see how to customize its look further. The "on" state reflects a state of "checked" for the checkbox each UI is associated with. When the form is submitted, that checkbox value will be passed along like in a regular checkbox.
Demo (5 color schemes):