Checkbox to toggle switch

up vote
0
down vote

favorite

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.

asked Nov 21 at 3:55

Owais Ahmed

5191528

add a comment |

up vote
0
down vote

favorite

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.

asked Nov 21 at 3:55

Owais Ahmed

5191528

add a comment |

up vote
0
down vote

favorite

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.

asked Nov 21 at 3:55

Owais Ahmed

5191528

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.

javascript css html5 css3 toggle

asked Nov 21 at 3:55

Owais Ahmed

5191528

asked Nov 21 at 3:55

Owais Ahmed

5191528

asked Nov 21 at 3:55

Owais Ahmed

5191528

asked Nov 21 at 3:55

Owais Ahmed

5191528

asked Nov 21 at 3:55

Owais Ahmed

5191528

add a comment |

3 Answers
3

active

oldest

votes

up vote
0
down vote

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>

answered Nov 21 at 4:33

Minal

158

The extra code is a problem which is being generated like that and cannot be changed otherwise there wont be any problems if I could have removed the extra code
– Owais Ahmed
Nov 21 at 4:37

add a comment |

up vote
0
down vote

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%;

}

edited Nov 21 at 4:54

Minal

158

answered Nov 21 at 4:21

Sandun Isuru Niraj

17910

Thanks for the answer . I tried this earlier but in my case, the checkbox html cannot be changed, otherwise there are so many examples for toggle switch
– Owais Ahmed
Nov 21 at 4:28

add a comment |

up vote
0
down vote

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>

answered Nov 21 at 10:14

Shahriyar Ahmed

214

Thanks for the answer but I cannot change the HTML and thats the problem otherwise there are many switch examples on internet I could have used
– Owais Ahmed
Nov 21 at 12:56

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53405045%2fcheckbox-to-toggle-switch%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

up vote
0
down vote

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>

answered Nov 21 at 4:33

Minal

158

The extra code is a problem which is being generated like that and cannot be changed otherwise there wont be any problems if I could have removed the extra code
– Owais Ahmed
Nov 21 at 4:37

add a comment |

up vote
0
down vote

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>

answered Nov 21 at 4:33

Minal

158

The extra code is a problem which is being generated like that and cannot be changed otherwise there wont be any problems if I could have removed the extra code
– Owais Ahmed
Nov 21 at 4:37

add a comment |

up vote
0
down vote

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>

answered Nov 21 at 4:33

Minal

158

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>

answered Nov 21 at 4:33

Minal

158

answered Nov 21 at 4:33

Minal

158

answered Nov 21 at 4:33

Minal

158

answered Nov 21 at 4:33

Minal

158

The extra code is a problem which is being generated like that and cannot be changed otherwise there wont be any problems if I could have removed the extra code
– Owais Ahmed
Nov 21 at 4:37

add a comment |

The extra code is a problem which is being generated like that and cannot be changed otherwise there wont be any problems if I could have removed the extra code
– Owais Ahmed
Nov 21 at 4:37

The extra code is a problem which is being generated like that and cannot be changed otherwise there wont be any problems if I could have removed the extra code
– Owais Ahmed
Nov 21 at 4:37

add a comment |

up vote
0
down vote

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%;

}

edited Nov 21 at 4:54

Minal

158

answered Nov 21 at 4:21

Sandun Isuru Niraj

17910

Thanks for the answer . I tried this earlier but in my case, the checkbox html cannot be changed, otherwise there are so many examples for toggle switch
– Owais Ahmed
Nov 21 at 4:28

add a comment |

up vote
0
down vote

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%;

}

edited Nov 21 at 4:54

Minal

158

answered Nov 21 at 4:21

Sandun Isuru Niraj

17910

Thanks for the answer . I tried this earlier but in my case, the checkbox html cannot be changed, otherwise there are so many examples for toggle switch
– Owais Ahmed
Nov 21 at 4:28

add a comment |

up vote
0
down vote

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%;

}

edited Nov 21 at 4:54

Minal

158

answered Nov 21 at 4:21

Sandun Isuru Niraj

17910

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%;

}

edited Nov 21 at 4:54

Minal

158

answered Nov 21 at 4:21

Sandun Isuru Niraj

17910

edited Nov 21 at 4:54

Minal

158

edited Nov 21 at 4:54

Minal

158

edited Nov 21 at 4:54

Minal

158

answered Nov 21 at 4:21

Sandun Isuru Niraj

17910

answered Nov 21 at 4:21

Sandun Isuru Niraj

17910

answered Nov 21 at 4:21

Sandun Isuru Niraj

17910

Thanks for the answer . I tried this earlier but in my case, the checkbox html cannot be changed, otherwise there are so many examples for toggle switch
– Owais Ahmed
Nov 21 at 4:28

add a comment |

Thanks for the answer . I tried this earlier but in my case, the checkbox html cannot be changed, otherwise there are so many examples for toggle switch
– Owais Ahmed
Nov 21 at 4:28

Thanks for the answer . I tried this earlier but in my case, the checkbox html cannot be changed, otherwise there are so many examples for toggle switch
– Owais Ahmed
Nov 21 at 4:28

add a comment |

up vote
0
down vote

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>

answered Nov 21 at 10:14

Shahriyar Ahmed

214

Thanks for the answer but I cannot change the HTML and thats the problem otherwise there are many switch examples on internet I could have used
– Owais Ahmed
Nov 21 at 12:56

add a comment |

up vote
0
down vote

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>

answered Nov 21 at 10:14

Shahriyar Ahmed

214

Thanks for the answer but I cannot change the HTML and thats the problem otherwise there are many switch examples on internet I could have used
– Owais Ahmed
Nov 21 at 12:56

add a comment |

up vote
0
down vote

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>

answered Nov 21 at 10:14

Shahriyar Ahmed

214

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>

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

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

answered Nov 21 at 10:14

Shahriyar Ahmed

214

answered Nov 21 at 10:14

Shahriyar Ahmed

214

answered Nov 21 at 10:14

Shahriyar Ahmed

214

answered Nov 21 at 10:14

Shahriyar Ahmed

214

Thanks for the answer but I cannot change the HTML and thats the problem otherwise there are many switch examples on internet I could have used
– Owais Ahmed
Nov 21 at 12:56

add a comment |

Thanks for the answer but I cannot change the HTML and thats the problem otherwise there are many switch examples on internet I could have used
– Owais Ahmed
Nov 21 at 12:56

Thanks for the answer but I cannot change the HTML and thats the problem otherwise there are many switch examples on internet I could have used
– Owais Ahmed
Nov 21 at 12:56

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Htykuut