前言
在后台管理系统、商品列表页面中，上下架状态开关是非常高频的 UI 组件。原生checkbox样式无法直接满足设计需求，常规方案使用自定义 CSS 美化复选框实现滑块开关。
本文提供一套无 JavaScript 依赖、兼容性良好、简洁轻量化的 Switch 开关实现代码，可直接用于商品上架 / 下架、状态启用 / 禁用场景。
实现思路
原生作为底层表单控件，保留原生选中状态、表单提交能力；
使用display: none隐藏原生复选框；
通过绑定 input，点击 label 自动触发复选框选中切换；
利用相邻兄弟选择器 + 配合:checked伪类区分开启 / 关闭样式；
::after伪元素制作滑动圆点，搭配transition实现平滑过渡动画。
完整代码示例
html
预览
代码分层解析
-
HTML 结构说明
html
预览for="sale" 关联 input 的 id，点击 label 等效点击复选框；
input 保留原生表单特性：支持表单提交、checked默认选中、disabled禁用；
结构极简，无多余嵌套，适合循环渲染表格列表（商品列表批量渲染）。 -
CSS 核心要点
隐藏原生复选框
display: none; 彻底隐藏原生控件，不占用页面空间；
区别：不建议使用visibility:hidden/opacity:0，仍然会保留占位。
定位布局
外层 label 设置position:relative，圆点伪元素absolute绝对定位，控制左右滑动位置。
状态控制核心：相邻兄弟选择器 +
css
.switch_input:checked + .switch
含义：当 input 被选中时，选中紧跟在 input 后面的.switch标签，这是纯 CSS 开关实现的关键。
过渡动画
transition: 0.3s ease，背景色与圆点位移分开过渡，滑动流畅不卡顿。
业务场景使用指南
场景 1：表格循环渲染多条商品开关
循环列表时，id 不能重复，改造方案：使用动态 ID，或者采用事件委托获取状态。
html
预览
场景 2：默认设置为上架（开启状态） 直接给 input 添加checked属性 html 预览 场景 3：禁用开关，不可点击 html 预览 额外补充禁用样式（推荐追加） css .switch_input:disabled + .switch { cursor: not-allowed; opacity: 0.6; } 场景 4：jQuery 获取 / 修改开关状态（后台管理常用） javascript 运行 // 获取是否上架 true=上架 false=下架 let isSale = $('#sale').prop('checked');
// JS强制设置为上架
$('#sale').prop('checked', true);
// JS强制设置为下架
$('#sale').prop('checked', false);
拓展优化建议
色彩统一管理
可以改用 CSS 变量维护主题色，方便项目统一换肤：
css
:root {
--switch-on-color: #2674dd;
--switch-off-color: #cccccc;
}
尺寸修改
如需放大 / 缩小开关：同步修改容器宽高、圆点大小、left 偏移值，保持比例；
增加 hover 交互
可新增 hover 透明度变化，提升交互体验；
兼容移动端
原生 checkbox 方案完美兼容移动端触摸，无需额外适配。
优缺点总结
✅ 优点
纯 CSS 实现，轻量无第三方依赖；
保留原生 checkbox 表单能力，易于取值；
动画流畅，DOM 结构简洁，适合表格大量渲染；
兼容 Chrome、Edge、Firefox 等主流浏览器。
❌ 局限
纯 CSS 无法实现文字（开启 / 关闭）内嵌滑块；如需滑块内文字，需要额外增加 DOM 节点；
不支持老版本 IE（后台管理系统基本无需考虑）。
写在最后
这类自定义滑块开关是中后台系统的通用基础组件，一次封装可以在商品上下架、启用禁用、状态启停等多处复用。如果项目使用 UI 框架（ElementUI/Ant Design）一般自带 Switch 组件，但在轻量化项目、原生 jQuery 项目中，这套手写 CSS 方案更加灵活，无框架冗余体积。