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

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

标签： javascripthtmlradio-button

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>