Sometimes we need a checkbox to verify that a user has check or uncheck to give answer to some question/statement in yes/no.
As we know that the default checkbox is not so attractive, so we add our style to make a custom checkbox.
So today we will learn to create toggle switcher using only CSS. And this switcher will be supported in all the browsers.
Below is the example of custom switch toggle:-
HTML-
Here is the HTML of custom switch, having label and input type checkbox.
<body>
<label class="switcher">
<input type="checkbox" checked>
<div class="switch_holder switch_btn"></div>
</label>
</body>
CSS-
Here is the style which is added to create checkbox attractive.
.switcher {/* This is label providing the base for the switch checkbox*/
position: relative;
display: inline-block;
width: 60px;
height: 20px;
margin-top: 10px;
border: 1px solid #D28D37;
border-radius: 34px;
}
.switcher input {display:none;}
.switch_holder { /*This is the checbox*/
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ED9931;
-webkit-transition: .4s;
transition: .4s;
}
.switch_holder:before { /*designing the rounded shape for the checkbox, whether it is checked or unchecked*/
position: absolute;
content: "";
height: 19px;
width: 19px;
left: 0px;
bottom: 0;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .switch_holder {
background-color: #ED9931; /*while the switch will be checked it's background color will be this*/
}
input:focus + .switch_holder {
box-shadow: 0 0 1px #ED9931; /*on focus box-shadow will be added to this*/
}
input:checked + .switch_holder:before { /*adding the movement in the checkbox while it is checkrd or unchecked*/
-webkit-transform: translateX(39px);
-ms-transform: translateX(39px);
transform: translateX(39px);
}
.switch_holder.switch_btn {
border-radius: 34px;
}
.switch_holder.switch_btn:before {
border-radius: 50%;
}
Below is the link to show the output of above code:-
0 Comment(s)