求助修复带双标签值的CSS Toggle Switch（切换开关）功能异常

针对你需要的带双标签切换开关（ON状态高亮、OFF状态无高亮），修复后的完整代码如下：

<div id="app-cover">
  <div class="row">
    <div class="toggle-button-cover">
      <div class="button-cover">
        <div class="button r" id="button-1">
          <input type="checkbox" class="checkbox" />
          <div class="knobs">
            <span class="off-label">Recurring Transfer</span>
            <span class="on-label">One Time</span>
          </div>
          <div class="layer"></div>
        </div>
      </div>
    </div>
  </div>
</div>

* {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

*:focus {
  outline: none;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  background-color: #f1f9f9;
}

#app-cover {
  display: table;
  width: 600px;
  margin: 80px auto;
  counter-reset: button-counter;
}

.row {
  display: table-row;
}

.toggle-button-cover {
  display: table-cell;
  position: relative;
  width: 500px;
  height: 140px;
  box-sizing: border-box;
}

.button-cover {
  height: 100px;
  margin: 20px;
  background-color: #fff;
  box-shadow: 0 10px 20px -8px #c5d6d6;
  border-radius: 4px;
}

.button-cover:before {
  counter-increment: button-counter;
  content: counter(button-counter);
  position: absolute;
  right: 0;
  bottom: 0;
  color: #d7e3e3;
  font-size: 12px;
  line-height: 1;
  padding: 5px;
}

.button-cover,
.knobs,
.layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.button {
  position: relative;
  top: 50%;
  width: 220px; /* 调整宽度适配双标签显示 */
  height: 36px;
  margin: -20px auto 0 auto;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  border-radius: 100px;
}

.button.r,
.button.r .layer {
  border-radius: 100px;
}

.checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.knobs {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
  padding: 0 10px;
}

.knobs span {
  font-size: 10px;
  font-weight: bold;
  transition: 0.3s ease all;
  padding: 8px 12px;
  border-radius: 20px;
}

/* OFF状态：无高亮 */
.checkbox:not(:checked) ~ .knobs .off-label {
  opacity: 1;
  color: #fff;
  background-color: #03a9f4;
}

.checkbox:not(:checked) ~ .knobs .on-label {
  opacity: 0.5;
  color: #666;
  background-color: transparent;
}

/* ON状态：高亮 */
.checkbox:checked ~ .knobs .on-label {
  opacity: 1;
  color: #fff;
  background-color: #f44336;
}

.checkbox:checked ~ .knobs .off-label {
  opacity: 0.5;
  color: #666;
  background-color: transparent;
}

.layer {
  width: 100%;
  transition: 0.3s ease all;
  z-index: 1;
}

.checkbox:not(:checked) ~ .layer {
  background-color: #ebf7fc;
}

.checkbox:checked ~ .layer {
  background-color: #fcebeb;
}

关键改动说明 #

• 调整.button宽度至220px，确保双标签文本完整显示
• 在.knobs内拆分独立的OFF/ON标签元素，实现单独样式控制
• 明确OFF状态仅激活对应标签高亮，ON状态切换为另一标签高亮，未激活标签保持无高亮效果
• 同步底层.layer背景色与标签状态匹配，强化视觉一致性
• 优化过渡动画逻辑，确保切换过程流畅自然

内容的提问来源于stack exchange，提问作者blues