yes no checkbox css
<!-- Not rly a checkbox -->
<label class="screen-reader-only" for="choice">Yes or No?</label>
<span aria-hidden="true">No</span>
<input type="range" max="1" id="choice" name="choice">
<span aria-hidden="true">Yes</span>yes no checkbox css
<!-- Not rly a checkbox -->
<label class="screen-reader-only" for="choice">Yes or No?</label>
<span aria-hidden="true">No</span>
<input type="range" max="1" id="choice" name="choice">
<span aria-hidden="true">Yes</span>yes no checkbox css
<!-- HTML -->
<p class="onoff"><input type="checkbox" value="1" id="checkboxID"><label for="checkboxID"></label></p>
<!-- CSS -->
<style>
body{
margin: 100px 50%;
}
.onoff {
margin-left: -27px;
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
position: relative;
cursor: pointer;
width: 55px;
height: 30px;
line-height: 30px;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.onoff label {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
cursor: pointer;
background: #cd3c3c;
border-radius: 5px;
font-weight: bold;
color: #FFF;
-webkit-transition: background 0.3s, text-indent 0.3s;
-moz-transition: background 0.3s, text-indent 0.3s;
-o-transition: background 0.3s, text-indent 0.3s;
transition: background 0.3s, text-indent 0.3s;
text-indent: 27px;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
}
.onoff label:after {
content: 'NO';
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
font-size: 12px;
color: #591717;
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.35);
z-index: 1;
}
.onoff label:before {
content: '';
width: 15px;
height: 24px;
border-radius: 3px;
background: #FFF;
position: absolute;
z-index: 2;
top: 3px;
left: 3px;
display: block;
-webkit-transition: left 0.3s;
-moz-transition: left 0.3s;
-o-transition: left 0.3s;
transition: left 0.3s;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}
.onoff input:checked + label {
background: #378b2c;
text-indent: 8px;
}
.onoff input:checked + label:after {
content: 'YES';
color: #091707;
}
.onoff input:checked + label:before {
left: 37px;
}
</style>Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
