Return to Answer

You can style checkboxs with a little trickery using the label element an example is below:

The CSS

.checkbox > input[type=checkbox] { visibility: hidden; } .checkbox { position: relative; display: block; width: 80px; height: 26px; margin: 0 auto; background: #FFF; border: 1px solid #2E2E2E; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } .checkbox:after { position: absolute; display: inline; right: 10px; content: 'no'; color: #E53935; font: 12px/26px Arial, sans-serif; font-weight: bold; text-transform: capitalize; z-index: 0; } .checkbox:before { position: absolute; display: inline; left: 10px; content: 'yes'; color: #43A047; font: 12px/26px Arial, sans-serif; font-weight: bold; text-transform: capitalize; z-index: 0; } .checkbox label { position: absolute; display: block; top: 3px; left: 3px; width: 34px; height: 20px; background: #2E2E2E; cursor: pointer; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; z-index: 1; } .checkbox input[type=checkbox]:checked + label { left: 43px; } 

The HTML

<div class="checkbox"> <input id="checkbox1" type="checkbox" value="1" /> <label for="checkbox1"></label> </div> 

You can style checkboxes with a little trickery using the label element an example is below:

.checkbox > input[type=checkbox] { visibility: hidden; } .checkbox { position: relative; display: block; width: 80px; height: 26px; margin: 0 auto; background: #FFF; border: 1px solid #2E2E2E; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } .checkbox:after { position: absolute; display: inline; right: 10px; content: 'no'; color: #E53935; font: 12px/26px Arial, sans-serif; font-weight: bold; text-transform: capitalize; z-index: 0; } .checkbox:before { position: absolute; display: inline; left: 10px; content: 'yes'; color: #43A047; font: 12px/26px Arial, sans-serif; font-weight: bold; text-transform: capitalize; z-index: 0; } .checkbox label { position: absolute; display: block; top: 3px; left: 3px; width: 34px; height: 20px; background: #2E2E2E; cursor: pointer; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; z-index: 1; } .checkbox input[type=checkbox]:checked + label { left: 43px; }

<div class="checkbox"> <input id="checkbox1" type="checkbox" value="1" /> <label for="checkbox1"></label> </div>

You can style checkboxs with the label element an example is below:

The CSS

.checkbox input[type=checkbox] { visibility: hidden; } .checkbox { width: 80px; height: 26px; margin: auto; position: relative; background: #FFF; border: 1px solid #2E2E2E; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } .checkbox:after { content: 'No'; font: 12px/26px Arial, sans-serif; color: #B50000; position: absolute; right: 10px; z-index: 0; font-weight: bold; } .checkbox:before { content: 'Yes'; font: 12px/26px Arial, sans-serif; color: #00BF00; position: absolute; left: 10px; z-index: 0; font-weight: bold; } .checkbox label { display: block; width: 34px; height: 20px; position: absolute; top: 3px; left: 3px; z-index: 1; background: #2E2E2E; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; cursor: pointer; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } .checkbox input[type=checkbox]:checked + label { left: 43px; } 

The HTML

<div class="checkbox"> <input type="checkbox" value="1" id="checkbox1" name="check"/> <label for="checkbox1"></label> </div> 

And a FIDDLE for the above code. Note that some CSS doesn't work in older versions of browsers, but I'm sure there are some fancy JavaScript examples out there!

You can style checkboxs with a little trickery using the label element an example is below:

The CSS

.checkbox > input[type=checkbox] { visibility: hidden; } .checkbox { position: relative; display: block; width: 80px; height: 26px;   margin: 0 auto; background: #FFF; border: 1px solid #2E2E2E; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } .checkbox:after { position: absolute; display: inline;   right: 10px; content: 'no'; color: #E53935; font: 12px/26px Arial, sans-serif; font-weight: bold; text-transform: capitalize; z-index: 0; } .checkbox:before { position: absolute; display: inline;   left: 10px; content: 'yes'; color: #43A047; font: 12px/26px Arial, sans-serif; font-weight: bold; text-transform: capitalize; z-index: 0; } .checkbox label { position: absolute; display: block; top: 3px; left: 3px; width: 34px; height: 20px; background: #2E2E2E; cursor: pointer; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px;  z-index: 1; } .checkbox input[type=checkbox]:checked + label { left: 43px; } 

The HTML

<div class="checkbox"> <input id="checkbox1" type="checkbox" value="1" /> <label for="checkbox1"></label> </div> 

And a FIDDLE for the above code. Note that some CSS doesn't work in older versions of browsers, but I'm sure there are some fancy JavaScript examples out there!

You can style checkboxs with lable example below:

The css!

input[type=checkbox] { visibility: hidden; } .checkbox { width: 80px; height: 26px; margin: auto; position: relative; background: #fff; border: 1px solid #2e2e2e; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } .checkbox:after { content: 'No'; font: 12px/26px Arial, sans-serif; color: #b50000; position: absolute; right: 10px; z-index: 0; font-weight: bold; } .checkbox:before { content: 'Yes'; font: 12px/26px Arial, sans-serif; color: #00bf00; position: absolute; left: 10px; z-index: 0; font-weight: bold; } .checkbox label { display: block; width: 34px; height: 20px; position: absolute; top: 3px; left: 3px; z-index: 1; background: #2e2e2e; -o-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -khtml-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -ms-transition: all 0.5s linear;  transition: all 0.5s linear; cursor: pointer; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } .checkbox input[type=checkbox]:checked + label { left: 43px; } 

The html!

<div class="checkbox"> <input type="checkbox" value="None" id="checkbox" name="check"/> <label for="checkbox"></label> </div> 

And a FIDDLE for the above code note that some css doesn't work in older versions of browsers, But I'm sure there are some jquery examples out there!

You can style checkboxs with the label element an example is below:

The CSS

.checkbox input[type=checkbox] { visibility: hidden; } .checkbox { width: 80px; height: 26px; margin: auto; position: relative; background: #FFF; border: 1px solid #2E2E2E; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } .checkbox:after { content: 'No'; font: 12px/26px Arial, sans-serif; color: #B50000; position: absolute; right: 10px; z-index: 0; font-weight: bold; } .checkbox:before { content: 'Yes'; font: 12px/26px Arial, sans-serif; color: #00BF00; position: absolute; left: 10px; z-index: 0; font-weight: bold; } .checkbox label { display: block; width: 34px; height: 20px; position: absolute; top: 3px; left: 3px; z-index: 1; background: #2E2E2E; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; cursor: pointer; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } .checkbox input[type=checkbox]:checked + label { left: 43px; } 

The HTML

<div class="checkbox"> <input type="checkbox" value="1" id="checkbox1" name="check"/> <label for="checkbox1"></label> </div> 

And a FIDDLE for the above code. Note that some CSS doesn't work in older versions of browsers, but I'm sure there are some fancy JavaScript examples out there!