Nsryjdtyk

I have a Checkbox which needs to be converted into toggle switch

The below HTML is a checkbox

https://jsfiddle.net/kdej9w2y/2/

   <div class="checkbox">

        <label>

            <input data-val="true" data-val-required="The Value field is required." id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_7__Value" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[7].Value" type="checkbox" value="true" autocomplete="off" style="display: none;">

            <span class="button-checkbox bootstrap-checkbox">

            <button type="button" class="btn clearfix custom-btn">

            <span class="icon fa fa-check theme-text" style="display:none;"></span><span class="icon fa fa-check-square">



            </span>

            <span class="icon cb-icon-check-indeterminate" style="display:none;"></span>

            </button>

            </span>

            <input name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[7].Value" type="hidden" value="false">

            Flag

        </label>

    </div>

I have tried applying different css but it is not doing anything. the HTML is always like that in my scnerio so Is there a way to implement toggle switch on the current checkbox HTML.

put this css first in your code

<style>

.switch {

  position: relative;

  display: inline-block;

  width: 60px;

  height: 34px;

}

.switch input { 

  opacity: 0;

  width: 0;

  height: 0;

}



.slider {

  position: absolute;

  cursor: pointer;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #ccc;

  -webkit-transition: .4s;

  transition: .4s;

}

.slider:before {

  position: absolute;

  content: "";

  height: 26px;

  width: 26px;

  left: 4px;

  bottom: 4px;

  background-color: white;

  -webkit-transition: .4s;

  transition: .4s;

}



input:checked + .slider {

  background-color: #2196F3;

}



input:focus + .slider {

  box-shadow: 0 0 1px #2196F3;

}



input:checked + .slider:before {

  -webkit-transform: translateX(26px);

  -ms-transform: translateX(26px);

  transform: translateX(26px);

}



/* Rounded sliders */

.slider.round {

  border-radius: 34px;

}



.slider.round:before {

  border-radius: 50%;

}

Remove Extra code and put class slider round in span tag

<label class="switch">

  <input data-val="true" id="wfe" name="chek" type="checkbox" value="true" autocomplete="off"/>

  <span class="slider round"></span>

  </label>

Try this,

Add this HTML for the Switch

<!-- Rectangular switch -->

<label class="switch">

  <input type="checkbox">

  <span class="slider"></span>

</label>



<!-- Rounded switch -->

<label class="switch">

 <input type="checkbox">

 <span class="slider round"></span>

</label>

Then add this CSS statements for the switch

/* The switch - the box around the slider */

   .switch {

     position: relative;

     display: inline-block;

     width: 60px;

     height: 34px;

    }



/* Hide default HTML checkbox */

  .switch input {

    opacity: 0;

    width: 0;

    height: 0;

  }



  /* The slider */

.slider {

  position: absolute;

  cursor: pointer;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #ccc;

  -webkit-transition: .4s;

  transition: .4s;

}



.slider:before {

  position: absolute;

  content: "";

  height: 26px;

  width: 26px;

  left: 4px;

  bottom: 4px;

  background-color: white;

  -webkit-transition: .4s;

  transition: .4s;

}



input:checked + .slider {

  background-color: #2196F3;

}



input:focus + .slider {

  box-shadow: 0 0 1px #2196F3;

}



input:checked + .slider:before {

  -webkit-transform: translateX(26px);

  -ms-transform: translateX(26px);

  transform: translateX(26px);

}



/* Rounded sliders */

.slider.round {

  border-radius: 34px;

}



.slider.round:before {

  border-radius: 50%;

}

You can try this.

.switch {

    position: relative;

    display: inline-block;

    width: 45px;

    height: 17px;

}



.switch input {

    opacity: 0;

    width: 0;

    height: 0;

}



.slider {

    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #ccc;

    -webkit-transition: .4s;

    transition: .4s;

}



.slider:before {

    position: absolute;

    content: "";

    height: 15px;

    width: 15px;

    left: 2px;

    bottom: 1px;

    background-color: white;

    -webkit-transition: .4s;

    transition: .4s;

}



input:checked + .slider {

    background-color: #263952;

}



input:focus + .slider {

    box-shadow: 0 0 1px #2196F3;

}



input:checked + .slider:before {

    -webkit-transform: translateX(26px);

    -ms-transform: translateX(26px);

    transform: translateX(26px);

}



.slider.round {

    border-radius: 34px;

}



.slider.round:before {

    border-radius: 50%;

}

<label class="switch">

  <input name="status" class="status" type="checkbox" checked="">

<div class="slider round"></div></label>