Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

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: 09/21/2014

Revision History: None

Usage Terms: Click here

Your Comments (0)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.


Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.