CSS修改新拟态切换开关选中态背景色不生效怎么办

你写的两类选择器完全没有作用到实际渲染的视觉元素上：

1. input[type="checkbox"]:checked { background: red }
   这个选择器确实能匹配到被选中的复选框，但你已经通过.toggle-state { display: none; }把这个原始复选框完全隐藏了，给隐藏元素设置的任何可见样式都不会被页面渲染；而且这个复选框本身不承担开关的视觉展示角色，就算样式可见，也不会出现在开关的位置上。
2. .toggle:checked { background: red }
   这个选择器从语法上就不成立：:checked伪类只会作用在<input type="checkbox">/<input type="radio">这类可交互的表单选择元素上，类名为.toggle的div是普通容器元素，永远不会触发这个伪类规则。

你当前的DOM结构设计是完全合理的：隐藏的真实复选框作为状态判断源，外层.toggle承载新拟态基底阴影，.indicator作为实际可见的滑动视觉块。你已经写对了选中态的位移联动逻辑，只需要在同个选择器规则里补充需要修改的选中态背景、阴影样式即可，完全不需要修改复选框或者外层容器的样式：

.toggle-state:checked ~ .indicator {
  transform: translate3d(25%, 0, 0);
  /* 在这里设置选中态的背景色即可 */
  background: red;
  /* 适配新拟态风格可同步调整阴影色调，避免风格脱节 */
  box-shadow:
    -8px -4px 8px 0px rgba(255, 255, 255, 0.5),
    8px 4px 12px 0px rgba(180, 0, 0, 0.3);
}

• 不要给设置了display: none的表单元素添加可见样式，这类元素不会参与页面渲染
• 自定义表单控件的联动样式，必须通过DOM的兄弟/相邻结构，从真实的选中表单元素出发，通过~选择器关联到后续的视觉渲染元素，不能跨级给普通容器绑定:checked伪类
• 新拟态风格改色时记得同步调整对应阴影的色值，避免硬上纯色破坏原设计质感

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