Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 Style Check box

CSS3 Style Check box


am trying to get to this particular image below using pure css3,

How it works: The app works in such a way that once the toggle button on the page is switched on,check boxes are activated and user can either check or un-check the boxes just like the image below.functional wise, the app is done but am having problem's getting the CSS aligned so it can look like the image below. kindly refer to this for a working example and my progress so far

Problem courtesy of: Apulo Ohale Cosmas Lite


My only Solution for you would be hide the checkbox by setting its opacity to zero, then handle your visual on/off states through a element with a background image, like the following:


.checkbox_frame {
position: relative;

input[type="checkbox"] {
width: 30px; height: 30px;
position: absolute;
opacity: 0;

input[type="checkbox"] + .state {
display: block;
width: 30px; 
height: 30px;
background: url('') center center no-repeat;

input[type="checkbox"]:checked + .state {
background: url('') center center no-repeat;

** Revised

Solution courtesy of: Shawn Wernig


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 Style Check box


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription