: эффект фокусировки не отображается в группе переключателей начальной загрузки

Question

Я создал 2 кнопки группы Bootstrap, поскольку для целей моего проекта большие кнопки работают лучше, чем обычная форма радио.Однако по какой-то причине эффект :checked или :focus здесь не срабатывает.

Добавление btn-secondary:focus{background-color:#8D69AD;} не имело значения, как было рекомендовано во всех других подобных вопросах.Возможно, проблема в том, что у меня есть input type="radio", а класс кнопки действительно находится в метке?

Кодовый код здесь: https://codepen.io/anzuj/pen/GazoJm?editors=1111

здесь также извлечен HTML для 2 групп кнопок:

  <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 доступно только из 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 не требуется.Вы также можете использовать тонкую сборку jQuery, как рекомендует домашняя страница Bootstrap.

//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>