over 4 years ago
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:-
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>
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:-
Starting with Chrome version 45, NPAPI is no longer supported for Google Chrome. For more information, see Chrome and NPAPI (blog.chromium.org).
Firefox and Microsoft Internet Explorer are recommended browsers for websites using java applets.
Chrome Version Support
Are you sure, you want to delete this comment?
Sign up using
0 Comment(s)