CSS/Sass切换开关样式不符合要求，寻求调整方案

我来帮你搞定这个切换开关的样式问题！看了你的代码，发现几个关键的小问题，调整后就能让开关达到你想要的效果了：

问题分析 #

1. 滑块定位逻辑冲突：你在.slider:before里同时设置了right: 26px和选中状态的transform: translateX(26px)，这会导致滑块的位置计算重复，出现偏移或者过渡不自然的情况。
2. 垂直居中方式不稳定：用margin:1px来实现垂直居中，容易因为容器或滑块尺寸的细微变化导致错位。
3. 过渡属性冗余：单独设置的margin过渡和transform过渡同时存在，会干扰滑块的平滑移动。

修改后的CSS代码 #

替换你现有的.slider:before和input:checked + .slider:before部分，其他样式可以保留：

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  display: block;
  width: 22px!important;
  height: 22px!important;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 1px; /* 初始位置紧贴容器左侧，留1px间距 */
  transform: translateY(-50%); /* 精准垂直居中 */
  border-radius: 50%;
  transition: transform .3s ease-in; /* 只保留transform过渡，保证顺滑 */
  box-shadow: 1px 2px 7px #444;
}

input:checked + .slider {
  background-color: #236093;
}

input:focus + .slider {
  box-shadow: 0 0 1px #236093;
}

input:checked + .slider:before {
  -webkit-transform: translateY(-50%) translateX(26px);
  -ms-transform: translateY(-50%) translateX(26px);
  transform: translateY(-50%) translateX(26px); /* 垂直居中不变，仅水平移动到右侧 */
}

/* Rounded sliders */
.slider.round {
  border-radius: 20px;
}

.slider.round:before {
  border-radius: 50%;
}

调整说明 #

• 精准垂直居中：用top:50% + transform: translateY(-50%)替代margin:1px，不管容器高度怎么变，滑块都能始终垂直居中。
• 简化定位逻辑：去掉right:26px，初始位置设为left:1px，选中时水平移动26px（计算方式：容器宽度50px - 滑块宽度22px - 左右各1px间距 = 26px），刚好让滑块对齐容器右侧，不会超出或错位。
• 优化过渡效果：只保留transform的过渡，避免多个过渡属性互相干扰，让滑块切换时更平滑自然。

如果调整后还有细节需要微调（比如颜色、阴影大小），直接修改对应属性值就可以啦！

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