Bootstrap 5：为复选框按钮组的伪按钮添加正常悬停效果

在Bootstrap按钮组组件中，常规<button>按钮的悬停效果显示正常（如图1），但使用<label>标签配合btn-check类复选框实现的伪按钮，悬停时效果异常（如图2）。如何让这些伪按钮实现和常规按钮一致的悬停行为？

图1：常规按钮正常悬停效果

图2：复选框伪按钮异常悬停效果

复现代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <!-- Example Code -->
    <p>预期效果：</p>
    <div class="btn-group" role="group" aria-label="Basic outlined example">
      <button type="button" class="btn btn-outline-primary">Left</button>
      <button type="button" class="btn btn-outline-primary">Middle</button>
      <button type="button" class="btn btn-outline-primary">Right</button>
    </div>
    <p>实际效果：</p>
    <div
      class="btn-group"
      role="group"
      aria-label="Basic checkbox toggle button group"
    >
      <input
        type="checkbox"
        class="btn-check"
        id="btncheck1"
        autocomplete="off"
      />
      <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

      <input
        type="checkbox"
        class="btn-check"
        id="btncheck2"
        autocomplete="off"
      />
      <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

      <input
        type="checkbox"
        class="btn-check"
        id="btncheck3"
        autocomplete="off"
      />
      <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
    </div>

    <!-- End Example Code -->
  </body>
</html>

解决方案 #

问题源于Bootstrap中btn-check相关的CSS优先级高于label按钮的默认悬停样式，导致hover状态的样式未正确应用。只需添加一段自定义CSS即可修复：

.btn-group label.btn-outline-primary:hover {
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-hover-bg: rgba(var(--bs-btn-color-rgb), 0.1);
  --bs-btn-hover-border-color: var(--bs-btn-color);
}

这段代码利用Bootstrap的CSS变量，强制label按钮在悬停时继承和常规按钮一致的颜色、背景色与边框色，直接覆盖干扰的样式规则，实现和常规按钮完全一致的悬停效果。

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