常用HTML多选按钮自定义样式基础代码-html教程-PHP中文网

原生几乎无法自定义样式，因浏览器限制导致 appearance: none 失效、滚动条和复选框图标不可控，ios safari 甚至降级为单选；推荐改用组合实现完全可控的多选 ui。

常用html多选按钮自定义样式基础代码

为什么原生 `<select multiple></select>` 几乎不能改样式

因为浏览器对 <select multiple></select> 的 CSS 控制力极弱。哪怕加了 appearance: none，在多数浏览器（尤其是 Windows Chrome、Firefox）里依然无效；滚动条、选项高亮、复选框图标这些都不可控。iOS Safari 更是直接忽略 multiple，弹出单选原生 Picker。这不是你代码写错了，是平台限制。

所以“自定义样式”这件事，对原生多选下拉来说，基本等于放弃。真要样式统一、交互可控，得换方案。

`<input type="checkbox">` 组合实现多选的样式控制要点

这才是真正可定制的多选方案。用一组 <input type="checkbox"> + <label></label> 模拟选项，所有样式、状态、动画全由你掌控。

必须给每个 input 设置相同 name（如 name="category"），否则表单提交时不会聚合成数组
推荐用 for 属性绑定 label 和 input，提升点击区域和可访问性：<input id="cat-1" type="checkbox" name="category" value="tech"><label for="cat-1">技术</label>
隐藏原生 checkbox：用 input[type="checkbox"] { appearance: none; }，再用 ::before 或 ::after 画自定义勾选框
利用 :checked 伪类控制选中态样式，比如背景色、边框、图标替换

一个最小可用的自定义多选按钮组 CSS 示例

下面这段 CSS 能让 checkbox 组看起来像带圆角、悬停反馈的现代按钮：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label {
  display: inline-block;
  padding: 8px 16px;
  margin: 4px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
input[type="checkbox"]:checked + label {
  background: #007bff;
  color: white;
  border-color: #007bff;
}
input[type="checkbox"]:hover:not(:checked) + label {
  background: #e9ecef;
}
input[type="checkbox"]:focus + label {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

注意：input 必须紧挨着 label，且 label 用 for 或包裹方式关联，否则 :checked + label 选择器不生效。

移动端适配和可访问性容易被忽略的点

桌面端调好样式后，一上手机就出问题——常见原因不是代码错，而是没考虑触控与语义。

触控区域太小：至少保证 label 高度 ≥ 44px，不然 iOS 上点不中
缺少键盘支持：用户按 Tab 键聚焦到 checkbox 后，空格键应能切换状态；当前示例依赖 :focus 样式，但没处理键盘逻辑，需 JS 补充或确保原生行为可用
屏幕阅读器识别：别只靠视觉样式表达“已选”，要保留 aria-checked="true" 或让 input 保持可读状态（隐藏但不 display: none，改用 clip-path 或 position: absolute; left: -9999px）
不要用 pointer-events: none 挡掉 checkbox，会破坏所有交互