如何修改toggle开关选中/未选中状态的内部背景色且不改变indicator颜色

实现方案 #

你之前的样式没有生效是因为选择器匹配逻辑错误：开关的内部背景是.toggle容器的背景，你没有为该元素设置基础背景色，也无法直接通过复选框的选中状态选中父级.toggle元素。

按照以下方案修改即可实现需求，不需要调整滑块本身的颜色：

方案1：全浏览器兼容版（需要微调HTML结构） #

调整HTML结构

将.toggle-state复选框移到.toggle容器外部，和.toggle平级，方便用CSS兄弟选择器匹配状态：

<label class="toggle-view" id="toggle-darkmode">
  <input class="toggle-state" type="checkbox" checked/>
  <div class="toggle">
    <div class="indicator"></div>
  </div>
</label>

修改CSS样式

.toggle-view {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: #394a56;
  }
  
  .toggle {
    position: absolute;
    height: 30px;
    width: 60px;
    border-radius: 15px;
    overflow: hidden;
    /* 新增：未选中状态深灰色背景，可自行调整色值 */
    background-color: #333;
    box-shadow:
      -8px -4px 8px 0px #ffffff,
      8px 4px 12px 0px #d1d9e6,
      4px 4px 4px 0px #d1d9e6 inset,
      -4px -4px 4px 0px #ffffff inset;
  }
  
  .toggle-state {
    display: none;
  }
  
  .indicator {
    height: 100%;
    width: 200%;
    background: #ecf0f3;
    border-radius: 15px;
    transform: translate3d(-75%, 0, 0);
    transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
    box-shadow:
      -8px -4px 8px 0px #ffffff,
      8px 4px 12px 0px #d1d9e6;
  }

  /* 修改选择器，匹配调整后的HTML结构 */
  .toggle-state:checked ~ .toggle .indicator {
    transform: translate3d(25%, 0, 0);
  }

  /* 新增：选中状态绿色背景，可自行调整色值 */
  .toggle-state:checked ~ .toggle {
    background-color: #2ecc71;
  }

方案2：无需修改HTML结构版 #

如果不想调整HTML结构，可以使用CSS :has() 选择器（支持Chrome 105+、Firefox 121+、Safari 15.4+），直接添加以下样式即可：

/* 未选中状态深灰色背景 */
.toggle {
  background-color: #333;
}
/* 选中状态绿色背景 */
.toggle-view:has(.toggle-state:checked) .toggle {
  background-color: #2ecc71;
}

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