Checkbox开关在Safari、IE/Edge的兼容问题修复咨询

我来帮你搞定这两个浏览器兼容问题，咱们分两部分逐一解决：

一、修复Safari的过渡效果问题 #

Safari 对使用 appearance: none 修饰的表单元素，伪元素的 left 属性过渡支持不够顺滑，再加上原代码的过渡简写存在兼容性差异，导致动画卡顿。我们可以做这些调整：

• 把伪元素的位置过渡从 left 替换为 transform: translateX()，Safari 对 transform 属性的过渡支持更稳定；
• 明确指定过渡的具体属性，避免简写带来的渲染差异；
• 给伪元素添加 -webkit-transform 前缀，确保旧版Safari也能识别。

二、修复Edge/IE的外观兼容问题 #

IE 完全不支持 appearance 属性，旧版Edge对它的支持也很差，所以不能依赖 appearance: none 来隐藏原生Checkbox的默认样式。我们换一种更兼容的实现思路：

• 把原生Checkbox设置为 opacity: 0 并绝对定位，让它不可见但依然能响应点击交互；
• 用相邻的label伪元素来模拟开关的外观，这样在IE里也能正常渲染自定义样式；
• 利用Checkbox的:checked状态来控制伪元素的样式变化。

修改后的完整代码 #

CSS 代码

/* 原生Checkbox隐藏，保留交互能力 */
.mytoggle {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  cursor: pointer;
}

/* 开关容器，用label伪元素实现外观 */
.mytoggle + label {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 30px;
  border-radius: 15px;
  overflow: hidden;
  background-color: #bdc3c7;
  cursor: pointer;
  /* 统一过渡属性写法 */
  -webkit-transition: background-color 0.25s ease-out;
  transition: background-color 0.25s ease-out;
}

/* 开关滑块 */
.mytoggle + label::before {
  content: "ON OFF";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #7f8c9a;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  text-indent: -32px;
  word-spacing: 40px;
  color: #fff;
  white-space: nowrap;
  /* 用transform实现顺滑过渡 */
  -webkit-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

/* 选中状态的容器背景 */
.mytoggle:checked + label {
  background-color: #2A3542;
}

/* 选中状态的滑块位置偏移 */
.mytoggle:checked + label::before {
  background-color: #41cac0;
  color: #41cac0;
  -webkit-transform: translateX(50px);
  transform: translateX(50px);
}

/* 聚焦状态样式，提升键盘导航可用性 */
.mytoggle:focus + label {
  outline: 2px solid #2A3542;
  outline-offset: 2px;
}

HTML 代码

<input type="checkbox" checked="checked" class="mytoggle" id="toggle1" />
<label for="toggle1"></label>

关键修改说明 #

1. Safari过渡优化：用transform: translateX()替代left属性的过渡，解决了Safari中过渡卡顿的问题，同时补充了-webkit-前缀确保全版本兼容；
2. Edge/IE兼容：通过隐藏原生Checkbox，用label伪元素构建开关，彻底避开了appearance属性的兼容性问题，IE10+和所有Edge版本都能正常显示；
3. 增强可用性：添加了:focus状态的轮廓样式，提升了键盘导航的可访问性。

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