如何实现CSS开关在禁用/启用状态下切换背景样式？

你需要的效果是：开关在禁用状态下保持透明背景，可用状态下（无论是否选中）显示指定背景色，选中时滑块切换位置。以下是修改后的代码：

修改后的CSS代码 #

* { box-sizing: border-box; }
.switch {
  appearance: none;
  padding: 9px 18px;
  border-radius: 13px;
  /* 启用状态的背景色，可根据需求调整 */
  background: radial-gradient(circle 9px, #007722 100%, transparent 100%) #e8f5e9 -9px;
  border: 1px solid #007722;
  transition: background-position 0.2s ease; /* 滑块移动动画 */
}
.switch:checked {
  background-position: 9px;
}
/* 禁用状态样式 */
.switch:disabled {
  background-color: transparent;
  border-color: #ccc;
  /* 禁用时滑块变灰 */
  background-image: radial-gradient(circle 9px, #ccc 100%, transparent 100%);
  cursor: not-allowed;
}

对应HTML代码 #

<!-- 可用状态开关 -->
<input type="checkbox" class="switch">
<!-- 禁用状态开关 -->
<input type="checkbox" class="switch" disabled>
<!-- 禁用且已选中的开关 -->
<input type="checkbox" class="switch" disabled checked>

关键说明 #

• 基础样式中把原有的透明背景替换成启用状态需要的背景色（示例用了浅绿色#e8f5e9，可自行调整）
• 通过:disabled伪类单独定义禁用状态：背景设为透明，边框和滑块改为灰色，同时设置鼠标禁止点击样式，明确区分禁用状态
• 添加入场过渡动画，让滑块切换更流畅自然

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