CSS主题切换按钮无法完全右移，仍露出部分图标

问题描述 #

我正在制作一个主题切换开关，但点击切换按钮时，滑块无法到达最右端，导致部分图标仍可见。左侧显示正常，仅右侧存在该问题。我尝试过调整右侧尺寸，或改为从右向左切换，虽能正常工作，但感觉是规避问题而非解决。

问题根源 #

问题出在滑块选中状态的定位逻辑上：

• 同时使用right:6px和transform: translateX(100%)会导致位置计算冲突，滑块实际移动距离超出预期
• 未明确设置box-sizing: border-box，边框宽度可能干扰容器内部尺寸计算

修复方案 #

移除冲突的定位属性，改用精确的位置计算方式，同时添加box-sizing确保尺寸计算准确。

修复后的完整代码

.switch-toggle {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  visibility: hidden;
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-switch {
  display: block;
  position: relative;
  width: 70px;
  height: 36px;
  cursor: pointer;
  transition: all 0.7s ease-out;
}

.switch-buttons {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: var(--dark);
  transition: all 0.5s ease-out;
  border-radius: 10px;
  border: 5px solid var(--light);
  /* 确保边框包含在元素宽度内，避免尺寸偏差 */
  box-sizing: border-box;
}

.switch-buttons::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 6px;
  width: 26px;
  height: 26px;
  background-color: var(--light);
  border-radius: 10%;
  transition: all 0.5s ease-out;
  box-sizing: border-box;
}

.switch-toggle:checked + .switch-buttons {
  background-color: var(--light);
  border: 5px solid var(--dark);
}

.switch-toggle:checked + .switch-buttons::after {
  /* 直接计算滑块最终位置：容器宽度 - 滑块宽度 - 右侧间距 */
  left: calc(100% - 6px - 26px);
  background-color: var(--dark);
}

替代方案（使用transform）

如果你更倾向于用transform实现动画，也可以替换选中状态的滑块样式为：

.switch-toggle:checked + .switch-buttons::after {
  /* 计算精确移动距离：容器内部可用宽度 - 滑块宽度 - 左右间距 */
  transform: translateX(22px);
  background-color: var(--dark);
}

这两种方式都能让滑块准确到达最右端，彻底解决图标残留的问题，而非规避问题。

内容的提问来源于stack exchange，提问作者Steven T.