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

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 {&nbsp; opacity: 0;&nbsp; width: 0;&nbsp; height: 0;}/* Rounded sliders */.slider {&nbsp; position: relative;&nbsp; display: block;&nbsp; cursor: pointer;&nbsp; height: 20px;&nbsp; width: 40px;&nbsp; background-color: #ccc;&nbsp; -webkit-transition: .4s;&nbsp; transition: .4s;}.slider:before {&nbsp; position: absolute;&nbsp; display: block;&nbsp; content: "";&nbsp; height: 10px;&nbsp; width: 10px;&nbsp; left: 4px;&nbsp; bottom: 4.5px;&nbsp; background-color: white;&nbsp; -webkit-transition: .4s;&nbsp; transition: .4s;}input:checked + .slider {&nbsp; background-color: #235b96;}input:focus + .slider {&nbsp; box-shadow: 0 0 1px rgba(0, 0, 0, 0.123);}input:checked + .slider:before {&nbsp; -webkit-transform: translateX(22px);&nbsp; -ms-transform: translateX(22px);&nbsp; transform: translateX(22px);}.slider.round {&nbsp; border-radius: 34px;}.slider.round:before {&nbsp; border-radius: 50%;}.toggle-text {&nbsp; text-transform: uppercase;&nbsp; font-weight: 700;&nbsp; overflow: hidden;&nbsp; line-height: 2;&nbsp; color: #235b96;&nbsp; letter-spacing: 1.2px;&nbsp; font-size: 11px;}.switch {&nbsp; display: flex;&nbsp; flex-direction: row;}.off {&nbsp; order: 1;&nbsp;}.slider {&nbsp; margin: 0 5px;&nbsp; order: 2;}.on {&nbsp; order: 3;&nbsp;}input:checked ~ .on {&nbsp; color: red;}input:not(:checked) ~ .off {&nbsp; color: red;}<div id="replacement_terminal_dairybeef_toggle">&nbsp; &nbsp; <div id="split_calving_toggle_container" >&nbsp; &nbsp; &nbsp; &nbsp; <div class="toggle-text">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="switch">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="togggle_repl_beef" class="checkbox-toggle" data-type="date" type="checkbox"></input>&nbsp; &nbsp; &nbsp; &nbsp; <label for="togggle_repl_beef" class="slider round"></label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="off">Fade this text when off&nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="on"> Fade this text when on </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; &nbsp; </div></div>