I have created my own custom checkboxes using this CSS code:
input[type="checkbox"]{
display: none;
}
.checkbox{
position: relative;
width: 60px;
height: 19px;
background-color: green;
border-radius: 10px;
}
.checkbox input[type="checkbox"] + label{
left: 0%;
top: 0px;
cursor: pointer;
position: absolute; /*otherwise ,,left: x px;" isn't working*/
display: block;
width: 30px;
height: 19px;
border-radius: 100%;
background-color: red;
box-shadow: 0px 0px 3px 2px red;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
.checkbox input[type="checkbox"]:checked + label{
left: 50%;
z-index: 1;
background-color: blue;
box-shadow: 0px 0px 3px 2px green;
}
.checkbox input[type="checkbox"]:checked + label:before{
content: "\2714";
position: absolute;
left: 8px;
color: white;
}
.checkbox input[type="checkbox"] + label:before{
content: "\2718";
position: absolute;
left: 8px;
color: white;
}
.checkbox:before{
position: absolute;
left: 5px;
content: "Yes";
color: white;
}
.checkbox:after{
position: absolute;
left: 35px;
content: "No";
color: white;
}
To see the result, I uploaded it to CSS Desk: CSSDesk: Decorative checkboxes. In another project, however, when trying to disable buttons with my custom checkboxes CSS Desk: 3D Buttons, there was an issue. The checkbox did not properly hide the :after/:before elements as expected. Even after enabling all buttons, the "s" from "Yes" remained visible next to "No". I suspect a font size change but am unsure how to confirm and rectify it. The only alteration made to the .checkbox div is adding display: inline-block; in order to display the checkbox alongside the buttons:
<div class="checkbox" style="display: inline-block;">
<input id="disableInfo" type="checkbox">
<label for="disableInfo"></label>
</div>disable info buttons
<br/><br/><br/><br/>
If anyone can offer assistance on resolving this issue, I would greatly appreciate it. Thank you.