While switching button how can i change text color?

user_3181077 0
Viewed 146

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

css html javascript
3 Answers

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>

user_133968630

CSS only version

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>

user_148071110

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>

user_126332280
Related