选中单选按钮时的颜色操作

Question

我试图在选中或取消选中滑块单选按钮时动态更改文本的颜色。我的目标是让文本在滑块处于活动状态与否时改变颜色。这是我的代码的链接。HTML：<div id="replacement_terminal_dairybeef_toggle">    <div id="split_calving_toggle_container" >        <div class="toggle-text">            <div class="switch">               <input id="togggle_repl_beef" class="checkbox-toggle" data-type="date" type="checkbox"></input>        <label for="togggle_repl_beef" class="slider round"></label>              <span class="off">Fade this text when off  </span>              <span class="on"> Fade this text when on </span>            </div>        </div>      </div></div>

Answer 1

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

.switch {

}

/* Hide default HTML checkbox */

.switch input {

  opacity: 0;

  width: 0;

  height: 0;

}

/* Rounded sliders */

.slider {

  position: relative;

  display: block;

  cursor: pointer;

  height: 20px;

  width: 40px;

  background-color: #ccc;

  -webkit-transition: .4s;

  transition: .4s;

}

.slider:before {

  position: absolute;

  display: block;

  content: "";

  height: 10px;

  width: 10px;

  left: 4px;

  bottom: 4.5px;

  background-color: white;

  -webkit-transition: .4s;

  transition: .4s;

}

input:checked + .slider {

  background-color: #235b96;

}

input:focus + .slider {

  box-shadow: 0 0 1px rgba(0, 0, 0, 0.123);

}

input:checked + .slider:before {

  -webkit-transform: translateX(22px);

  -ms-transform: translateX(22px);

  transform: translateX(22px);

}

.slider.round {

  border-radius: 34px;

}

.slider.round:before {

  border-radius: 50%;

}

.toggle-text {

  text-transform: uppercase;

  font-weight: 700;

  overflow: hidden;

  line-height: 2;

  color: #235b96;

  letter-spacing: 1.2px;

  font-size: 11px;

}

.switch {

  display: flex;

  flex-direction: row;

}

.off {

  order: 1; 

}

.slider {

  margin: 0 5px;

  order: 2;

}

.on {

  order: 3; 

}

input:checked ~ .on {

  color: red;

}

input:not(:checked) ~ .off {

  color: red;

}

<div id="replacement_terminal_dairybeef_toggle">

    <div id="split_calving_toggle_container" >

        <div class="toggle-text">

            <div class="switch"> 

              

              <input id="togggle_repl_beef" class="checkbox-toggle" data-type="date" type="checkbox"></input>

        <label for="togggle_repl_beef" class="slider round"></label>

              <span class="off">Fade this text when off  </span>

              <span class="on"> Fade this text when on </span>

            </div>

        </div>  

    </div>

</div>