css - :focus effect not showing up on bootstrap radio button group

Question

我创建了 2 个 Bootstrap 组按钮，因为为了我的元素目的，大按钮比通常的单选按钮效果更好。但是，由于某些原因，:checked 或 :focus 效果并未在此处触发。

添加 btn-secondary:focus{background-color:#8D69AD;} 没有任何区别，正如在所有其他类似问题中所建议的那样。也许问题是我有 input type="radio" 按钮类实际上在标签中？

代码笔在这里:https://codepen.io/anzuj/pen/GazoJm?editors=1111

这里也提取了 2 个按钮组的 HTML:

  <p>Select your year:</p>
  <div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary rounded">
      <input type="radio" name="year" id="junior" value="junior"> Junior
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="year" id="sophomore" value="sophomore"> Sophomore
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="year" id="senior" value="senior"> Senior
    </label>
  </div>


  <p>Select your path:</p>
  <div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary btn-rounded">
      <input type="radio" name="path" id="artificer" value="artificer"> Artificer
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="path" id="healer" value="healer"> Healer
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="path" id="crypto" value="crypto"> Cryptozoologist
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="path" id="guardian" value="guardian"> Guardian
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="path" id="cursebreaker" value="cursebreaker"> Curse Breaker
    </label>
  </div>

  <span id="classResult"> </span>

知道我遗漏了什么吗？

Answer 1

将按钮用作复选框是 Bootstrap 的一项功能，要求其 JavaScript 库按预期工作。在 CSS 中不可能正确地执行此操作，因为它需要父选择器或 :has 选择器，因为 DOM 的 checked 属性只能从 CSS 在输入元素本身上使用，而不是在其父元素(按钮)上使用。您的应用程序的一个简单修复方法是添加 Bootstrap JavaScript 库:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

不应要求 Popper.js。您还可以按照 Bootstrap 主页的建议使用 jQuery 的精简版本。

//function to display timetable according to user choices in year/path
//currently only Junior choices
$(document).ready(function () {
    $('input[type="radio"]').on("change", function () {
        //making chosen radio options to variables
        var $year = $('input[name="year"]:checked');
        var $path = $('input[name="path"]:checked');
        //logic
        if ($year.val() == "junior" && $path.val() == "artificer") {
            $("#classResult").html("Junior artificer timetable!");
        } else if ($year.val() == "junior" && $path.val() == "cursebreaker") {
            $("#classResult").html("Junior cursebreaker timetable!");
        } else if ($year.val() == "junior" && $path.val() == "crypto") {
            $("#classResult").html("Junior crypto timetable!");
        } else if ($year.val() == "junior" && $path.val() == "healer") {
            $("#classResult").html("Junior healer timetable!");
        } else if ($year.val() == "junior" && $path.val() == "guardian") {
            $("#classResult").html("Junior guardian timetable!");
        } 
    });
});

btn-secondary:focus{
  background-color:#8D69AD;
}

<!-- Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!--jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<div class="container">
  <br>

  <p>Select your year:</p>
  <div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary rounded">
      <input type="radio" name="year" id="junior" value="junior"> Junior
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="year" id="sophomore" value="sophomore"> Sophomore
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="year" id="senior" value="senior"> Senior
    </label>
  </div>

  <br><br>
  <p>Select your path:</p>
  <div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary btn-rounded">
      <input type="radio" name="path" id="artificer" value="artificer"> Artificer
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="path" id="healer" value="healer"> Healer
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="path" id="crypto" value="crypto"> Cryptozoologist
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="path" id="guardian" value="guardian"> Guardian
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="path" id="cursebreaker" value="cursebreaker"> Curse Breaker
    </label>
  </div>
  <br>
  <br>

  <span id="classResult"> </span>

</div>