仅用CSS实现无JS单input的Android风格开关复选框

这套实现方案完全不依赖JavaScript，不需要额外嵌套辅助标签，可以直接在项目里复用：

• 仅使用单个<input type="checkbox">原生元素，无多余div、span等冗余节点
• 支持尺寸、形状、配色全自定义调整
• 兼容所有现代浏览器，自带平滑过渡动画
• 完整保留原生复选框特性：支持键盘操作、表单值正常提交、支持disabled禁用状态

实现代码 #

HTML结构 #

只需要写单个input标签即可，不需要嵌套任何其他元素：

<input type="checkbox" class="android-toggle">

CSS样式 #

样式里预留了自定义变量，直接修改变量值就能快速调整开关外观：

.android-toggle {
  /* 👇 自定义参数区，按需修改即可 */
  --track-w: 48px; /* 开关轨道宽度 */
  --track-h: 24px; /* 开关轨道高度 */
  --track-radius: 12px; /* 轨道圆角：设为高度一半是胶囊形，设为0是矩形，设为4px是小圆角矩形 */
  --color-off: #bdbdbd; /* 关闭状态轨道背景色 */
  --color-on: #4caf50; /* 开启状态轨道背景色 */
  --thumb-size: 20px; /* 圆形滑块直径 */
  --thumb-color: #ffffff; /* 滑块颜色 */
  --anim-duration: 0.2s; /* 开关切换动画时长 */

  /* 核心逻辑样式 一般不需要修改 */
  appearance: none;
  -webkit-appearance: none;
  width: var(--track-w);
  height: var(--track-h);
  border-radius: var(--track-radius);
  background: var(--color-off);
  position: relative;
  cursor: pointer;
  transition: background var(--anim-duration) ease;
  margin: 0;
  vertical-align: middle;
}

.android-toggle::after {
  content: "";
  position: absolute;
  top: calc((var(--track-h) - var(--thumb-size)) / 2);
  left: calc((var(--track-h) - var(--thumb-size)) / 2);
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  background: var(--thumb-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform var(--anim-duration) ease;
}

.android-toggle:checked {
  background: var(--color-on);
}

.android-toggle:checked::after {
  transform: translateX(calc(var(--track-w) - var(--track-h)));
}

.android-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

因为是基于原生checkbox改造，所有原生属性都可以正常使用：给标签加checked属性就可以默认开启，加disabled属性就可以禁用，表单提交时会自动传递选中状态值，不需要额外写JS同步状态。

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