Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

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):

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 02/04/2015

Revision History: None

Usage Terms: Click here

Your Comments
Copyright 2006-2016 Dynamic Drive