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!