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

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>

CSS：

/* 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;
}

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>