如何利用CSS实现自定义的开关按钮？-css教程-PHP中文网

纯 css 实现开关按钮的核心是用 checkbox 的 :checked 状态驱动 label 伪元素视觉变化；需隐藏 input 但保留可访问性，用 opacity: 0 + pointer-events: none；滑块位移用 transform 或 left 控制，避免 margin 引发重排；须适配移动端点击热区、深色模式及键盘焦点。

如何利用css实现自定义的开关按钮？

纯 CSS 实现开关按钮，核心不是“画一个按钮”，而是用 input[type="checkbox"] 的 :checked 状态驱动视觉变化——原生控件必须保留语义和可访问性，样式则完全由 label 和伪元素接管。

为什么不能直接给 `input[type="checkbox"]` 加宽高和圆角

Chrome、Safari 甚至新版 Firefox 都会忽略对 input[type="checkbox"] 直接设置的 width、height、border-radius，因为 UA 样式表强制覆盖。强行写只会导致布局错位或样式不生效，不是你 CSS 写错了，是浏览器故意不让你动它。

正确做法是隐藏它但不破坏可访问性：

用 opacity: 0 + pointer-events: none（保留焦点、屏幕阅读器可读）
不用 display: none 或 visibility: hidden（前者移除可聚焦性，后者仍占空间且无点击穿透）
label 必须通过 for 属性或包裹结构与该 input 关联，否则点击无效

用 `::before` 和 `::after` 画开关轨道和滑块

把 label 当作容器，用两个伪元素分别实现轨道（背景）和滑块（圆钮）。关键点在于：滑块的位移必须靠 transform: translateX() 或 left 控制，不能靠 margin——后者会触发重排，动画卡顿。

示例片段：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

label.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}
label.switch::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #ccc;
  border-radius: 15px;
  transition: background 0.2s;
}
label.switch::after {
  content: "";
  position: absolute;
  top: 50%; left: 2px;
  width: 26px; height: 26px;
  background: white;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: all 0.25s cubic-bezier(0.3, 1.2, 0.7, 1);
}
input:checked + label.switch::before {
  background: #4caf50;
}
input:checked + label.switch::after {
  left: calc(100% - 28px);
}

注意：left: calc(100% - 28px) 中的 28px = 滑块宽度（26px）+ 右侧留白（2px），这个计算必须精确，否则移动端拖动时容易错位。

移动端点击区域小、滑动不跟手？补这三处

绝对定位方案在手机上出问题，90% 是交互层缺失，不是 CSS 写得不对。

给 label 加 cursor: pointer 和 -webkit-tap-highlight-color: transparent（消除 iOS 点击灰斑）
给滑块伪元素（::after）加 touch-action: pan-x（禁用默认纵向滚动干扰，让手指横向拖动更灵敏）
确保整个 label 的点击热区 ≥ 44×44px（iOS 最小可点击尺寸），可通过 padding 或 min-width/min-height 扩展，别只靠视觉大小