Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Custom Switchery using CSS

    @neha.bhatt
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 397
    Comment on it

    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:-

    https://jsfiddle.net/0mtp3wqa/1/

     

    Custom Switch
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: