How to make an on/off toggle

Hi, what's the easiest way to make an on/off switch just like the ones in the responsive settings area in bootstrap studio?

You will need to create a component yourself

Here is an example of how to do it

Thank you, it worked! (and I'm a complete noob, this was my first time editing the CSS). I shared it for the next person.

Ah, I celebrated a bit too fast! Now when I try to add the label, it is hidden behind the toggle. I've tried adjusting margins and padding in the styles.css, I've tried several position and display options in the switch style, but I can't seem to solve the problem. Any ideas?

You'll have to post some code, we can't fix it if we don't know what you have written.

Copy and post the html for the part of your page where you have the toggle.

Ok, here is my html:


<!-- Rounded switch --> <label class="switch"> <input type="checkbox"/> Label </label></div>

And here is the CSS: .switch { position:absolute; display:inline-block; width:30px; height:17px; margin-right:20px; margin-bottom:auto; }

.switch input { display:none; } .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:13px; width:13px; left:2px; bottom:2px; background-color:white; -webkit-transition:.2s; transition:.2s; }

input:checked + .slider { background-color:#85c226; }

input:focus + .slider { box-shadow:0 0 1px #85c226; }

input:checked + .slider:before { -webkit-transform:translateX(13px); -ms-transform:translateX(13px); transform:translateX(13px); }

.slider.round { border-radius:17px; }

.slider.round:before { border-radius:50%; }

Any thoughts?

Ok, I finally figured it out. I'm posting my changes here in case anyone else encounters this challenge:

The CSS: /* The switch - the box around the slider */ .switch { position: relative; display: inline-block; vertical-align: text-top; width: 30px; height: 17px; }

/* Hide default HTML checkbox */ .switch input {display:none;}

/* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .2s; transition: .2s; }

.slider:before { position: absolute; content: ""; height: 13px; width: 13px; left: 2px; bottom: 2px; background-color: white; -webkit-transition: .2s; transition: .2s; }

input:checked + .slider { background-color: #85c226; }

input:focus + .slider { box-shadow: 0 0 1px #85c226; }

input:checked + .slider:before { -webkit-transform: translateX(13px); -ms-transform: translateX(13px); transform: translateX(13px); }

/* Rounded sliders */ .slider.round { border-radius: 17px; }

.slider.round:before { border-radius: 50%; }


<div><label class="switch"> <input type="checkbox"> </label> Label </div>