bootstrap怎么修改单选框和复选框的样式-Bootstrap教程-PHP中文网

bootstrap 5 的 checkbox/radio 自定义依赖正确结构：input 与 label 必须同属 div.form-check，label 的 for 值须严格匹配 input 的 id，伪元素样式通过 input:checked + label::after 控制，禁用 display: none 以保障可访问性。

bootstrap 5 默认不替换原生 <input type="checkbox"> 和 <input type="radio"> 的视觉渲染，只提供基础布局类（如 form-check）和可访问性结构。直接改 input 的 border 或 background 没用——它被设为 opacity: 0 且 position: absolute 隐藏了，真正显示的是紧邻 label 的伪元素。

为什么加了 `form-check-input` 却没变化

常见原因不是 class 写错，而是结构或配套缺失：

form-check-input 必须和 form-check-label 在同一个 div.form-check 容器内，缺一不可
label 必须带 for 属性，且值严格等于对应 input 的 id，否则点击文字无法触发选中
漏写 form-check 容器类会导致外边距、对齐、垂直居中全部失效
若用了第三方图标库（如 Bootstrap Icons）或自定义 CSS，可能意外重置了 appearance: none 或覆盖了伪元素定位

纯 CSS 自定义 checkbox/radio 图标（无 JS）

核心是操作 label 的 ::before 和 ::after，靠兄弟选择器响应状态：

给 input 设 position: absolute; opacity: 0;（不能用 display: none，会破坏可访问性）
给 label 设 position: relative;，让伪元素能准确定位
用 input:checked + label::after 控制选中态，不是 input:checked::after（input 不支持伪元素）
图标推荐用 Unicode（如 "✓"、"●"）或 inline SVG base64，避免字体加载失败导致空白

示例：圆角复选框勾选图标

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

.form-check-input {
  position: absolute;
  opacity: 0;
}
.form-check-label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid #adb5bd;
  border-radius: 4px;
  margin-right: 8px;
  vertical-align: middle;
}
.form-check-input:checked + .form-check-label::after {
  content: "✓";
  position: absolute;
  left: 2px;
  top: 2px;
  font-size: 12px;
  color: #fff;
}