.toggle-switch input[type=checkbox] {
display: none
}
.toggle-switch label {
cursor: pointer;
}
.toggle-switch label .toggle-track {
display: block;
height: 10px;
width: 85px;
background: #eee;
border-radius: 20px;
position: relative;
margin-bottom: 5px;
border: 1px solid #ccc;
}
.toggle-switch .toggle-track:before{
content:'';
display:inline-block;height:18px;width:18px;background:blue;
border-radius:20px;
position:absolute;
top:-5px;
left:0;
transition:left .5s ease-in;
}
.toggle-switch input[type="checkbox"]:checked + label .toggle-track:before {
background:green;
left:70px;
} <div class="col-12">
<div class="row">
<div class="col-3 col-md-3" >ENABLE</div>
<div class="col-3 col-md-3">
<div class="toggle-switch">
<input type="checkbox" id="chkTest" name="chkTest">
<label for="chkTest">
<span class="toggle-track"></span>
</label>
</div>
</div>
<div class="col-3 col-md-3">DISABLE</div>
</div>
</div>The color of text changing according to the witching toggled button. When it click on toggle button text color will change according to the switch button color is changing the text color will change too.
You can add an event listener when click the switch to define your changing color logic.
const checkbox = document.getElementById('chkTest');
const enableText = document.getElementById('enable');
const disableText = document.getElementById('disable');
checkbox.addEventListener('change', (event) => {
if (event.currentTarget.checked) {
enableText.classList.add("green-text");
disableText.classList.remove("blue-text");
}
else {
disableText.classList.add("blue-text");
enableText.classList.remove("green-text");
}
}).toggle-switch input[type=checkbox] {
display: none
}
.toggle-switch label {
cursor: pointer;
}
.toggle-switch label .toggle-track {
display: block;
height: 10px;
width: 85px;
background: #eee;
border-radius: 20px;
position: relative;
margin-bottom: 5px;
border: 1px solid #ccc;
}
.toggle-switch .toggle-track:before {
content: '';
display: inline-block;
height: 18px;
width: 18px;
background: blue;
border-radius: 20px;
position: absolute;
top: -5px;
left: 0;
transition: left .5s ease-in;
}
.toggle-switch input[type="checkbox"]:checked+label .toggle-track:before {
background: green;
left: 70px;
}
.green-text {
color: green;
}
.blue-text {
color: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12">
<div class="row">
<div id="enable" class="col-3 col-md-3">ENABLE</div>
<div class="col-3 col-md-3">
<div class="toggle-switch">
<input type="checkbox" id="chkTest" name="chkTest">
<label for="chkTest">
<span class="toggle-track"></span>
</label>
</div>
</div>
<div id="disable" class="col-3 col-md-3">DISABLE</div>
</div>
</div>My first thought was to use javascript to switch the styles. To be honest, I prefer to use javascript. But some people try to avoid javascript because they are not familiar with it. Then you can only use css. The only disadvantage of css is that the slibing selector is like a waterfall and you can't slide up. So in my case I had to work with negative margins. It works well, but you have to compromise with the margins to position the text elements.
#nocheck {
margin-top: -45px;
margin-bottom: 30px;
}
.toggle-switch {
padding:50px;
}
#chkTest:checked ~ #check { color: green; }
#chkTest:checked ~ #nocheck { color: black; }
#check { color: black; }
#nocheck { color: blue; }
.toggle-switch input[type=checkbox] {
display: none
}
.toggle-switch label {
cursor: pointer;
}
.toggle-switch label .toggle-track {
display: block;
height: 10px;
width: 85px;
background: #eee;
border-radius: 20px;
position: relative;
margin-bottom: 5px;
border: 1px solid #ccc;
}
.toggle-switch .toggle-track:before{
content:'';
display:inline-block;height:18px;width:18px;background:blue;
border-radius:20px;
position:absolute;
top:-5px;
left:0;
transition:left .5s ease-in;
}
.toggle-switch input[type="checkbox"]:checked + label .toggle-track:before {
background:green;
left:70px;
} <div class="col-3 col-md-3">
<div class="toggle-switch">
<input type="checkbox" id="chkTest" name="chkTest">
<label for="chkTest">
<span class="toggle-track"></span>
</label>
<div class="col-3 col-md-3" id="nocheck">ENABLE</div>
<div class="col-3 col-md-3" id="check">DISABLE</div>
</div>
</div>Let me help too
document.addEventListener('DOMContentLoaded', function () {
var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function () {
if (checkbox.checked) {
// do this
document.getElementById("myH2").style.color = "#ff0000";
document.getElementById("myH1").style.color = "black";
console.log('Checked');
} else {
// do that
document.getElementById("myH2").style.color = "black";
document.getElementById("myH1").style.color = "#ff0000";
console.log('Not checked');
}
});
});.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.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: 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);
}<h2 id="myH2">Toggle Switch</h2>
<label class="switch">
<input type="checkbox">
<div class="slider"></div>
</label>
<h2 id="myH1" style="color:red">Toggle Switch</h2>