layui switch 不支持 layui-btn-sm 等尺寸类，仅能通过 CSS 覆盖 width/height、i 元素尺寸及字体微调实现视觉压缩，且须配合 form.render('switch') 重载并注意可访问性。
layui switch 本身不支持尺寸类，别试 layui-btn-sm 这类写法
layui 的 switch 是基于 input[type="checkbox"] + lay-skin="switch" 实现的伪元素控件，它**没有内置尺寸类**（不像按钮有 layui-btn-lg 等）。所有试图给 switch 加 layui-btn-*、layui-icon-* 或直接改 font-size 的做法，基本都会失效或错位。
真正可控的只有两个维度：开关整体宽度（靠 CSS width）、滑块/轨道比例（靠 background-image 或 transform 缩放），但后者极易破坏默认交互反馈。
- 直接加
style="width: 40px; height: 20px;"可能导致点击区域变小、文字错位、甚至失去 toggle 动画 - 用
transform: scale(0.8)虽然能缩放，但会连带影响lay-text文字和点击热区，且在高 DPI 屏幕下模糊 - 修改
layui.css里的.layui-form-switch相关规则风险高，升级 layui 时会被覆盖
表格里 switch 太大？优先调低表格行高，而不是动 switch
常见场景是数据表格中 switch 显得臃肿、被行高撑开、上下留白过大——这其实是表格容器的问题，不是 switch 本身。
- 检查是否用了
layui-btn-lg类误加到同一单元格的其他按钮上，造成整行高度被拉高 - 确认表格列配置没设
minWidth或width过小，导致内容挤压后渲染异常 - 最有效解法是收紧表格行内边距：
.layui-table tbody tr td { padding: 4px 8px; } - 若仍需压缩视觉尺寸，可微调开关轨道高度：
.layui-form-switch { height: 22px; }+.layui-form-switch i { height: 16px; }（注意：i 元素是滑块，需同步调）
真要“小号 switch”，只能用 CSS 覆盖 + 手动测兼容性
如果你明确需要比默认更紧凑的开关（比如移动端密集列表），必须手动覆盖样式，且要验证 IE10+ 和主流 Chrome/Firefox。
下面这段 CSS 可以把开关压到约 18px 高、36px 宽，适用于 layui-btn-xs 同级密度：
.layui-form-switch {
height: 18px;
line-height: 18px;
}
.layui-form-switch i {
width: 28px;
height: 14px;
top: 2px;
}
.layui-form-switch em {
font-size: 12px;
line-height: 18px;
}
- 务必在
layui.use(['table', 'form'])加载完成后再注入该样式，避免被 layui.css 覆盖 - 如果用了
lay-text="启用|禁用"，中文字符可能换行，建议改用单字如"开|关" - 移动端点击区域会变小，建议加
touch-action: manipulation;提升响应 - 不要用
zoom或scale，它们会让 checkbox 原生焦点框错位
别忽略 form.render('switch') 的时机问题
无论你用什么方式调整大小，只要表格是异步加载（url 配置）、分页、重载，就一定会遇到 switch 样式丢失或点击无反应——根本原因不是尺寸，而是 DOM 插入后没重新解析表单模块。
- 必须在
table.render()的done回调里调用layui.form.render('switch') - 如果用了
table.reload()，reload 的done里也得再 render 一次 - 不能写成
layui.form.render()（空参），它会重绘全部表单控件，性能差且可能干扰其他模块 - 确保
lay-filter值和form.on('switch(filter)')中的 filter 完全一致，大小写都不能错
事情说清了就结束。layui switch 的“尺寸”本质是视觉压缩，不是功能分级；改得越小，越容易牺牲可访问性和跨端一致性。真要省空间，优先砍列、合并操作、用文字链接替代开关。
