Блог

Главная - Вопросы по программированию - Переключатели не показывают проверенное состояние при стилизации с помощью Bootstrap

Переключатели не показывают проверенное состояние при стилизации с помощью Bootstrap

#css #bootstrap-4

#css #bootstrap-4

Вопрос:

Когда я просто использую обычную группу переключателей с Bootstrap, подобную этой, без специального стиля, тогда это работает просто отлично:

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="radio">

        <div class="form-group">
            <label><input type="radio" value="keep">Ändra inte lösenordet</label>
        </div>
        <div class="form-group">
            <label><input type="radio" value="auto">Generera ett nytt lösenord automatiskt</label>
        </div>
        <div class="form-group">
            <label><input type="radio" value="manual">Ange ett nytt lösenord manuellt</label>
        </div>
        <div class="form-group">
            <input type="text" class="form-control" class="custom-control-input" name="password" id="password" placeholder="Ange ett lösenord manuellt">
        </div>
                   
    </div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 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>

Переключатели отображают состояние checked при нажатии на них. Но если я попытаюсь стилизовать кнопки с помощью custom-control CSS-класса следующим образом:

     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <div class="radio custom-control custom-radio">

        <div class="form-group">
            <label class="custom-control-label"><input type="radio" class="custom-control-input" value="keep">Ändra inte lösenordet</label>
        </div>
        <div class="form-group">
            <label class="custom-control-label"><input type="radio" class="custom-control-input" value="auto">Generera ett nytt lösenord automatiskt</label>
        </div>
        <div class="form-group">
            <label class="custom-control-label"><input type="radio" class="custom-control-input" value="manual">Ange ett nytt lösenord manuellt</label>
        </div>
        <div class="form-group">
            <input type="text" class="form-control" class="custom-control-input" name="password" id="password" placeholder="Ange ett lösenord manuellt">
        </div>
                       
    </div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 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>

… это не работает. Ничего не происходит, когда я нажимаю на кнопки. Как я могу это исправить?

Комментарии:

1. Можете ли вы опубликовать свой css?

2. Я использую стандартный стиль Bootstrap 4, без дополнительного CSS. Переключатели отображают стиль, но не состояние checked.

3. Пользовательские решения переключателей зависят от конкретной структуры DOM, касающейся метки и ввода, где входные данные должны находиться перед меткой, при этом метка является родственной. Это связано с ограничениями CSS.

4. Это работает технически , просто с учетом вашей текущей структуры HTML CSS не может показать, что переключатель отмечен, поэтому он не работает * визуально *. Пожалуйста, проверьте мой ответ и пояснения ниже и прокомментируйте, если что-то остается неясным.

Ответ №1:

Решения пользовательских переключателей (и флажков тоже) для кнопок зависят от конкретной структуры DOM относительно того, label и input где input они должны быть перед label , при этом label они являются родственными (чаще всего реализуются с ожиданием того, что label они будут смежными). Это связано с ограничениями CSS.

Это означает, что ваши метки больше не связаны с переключателем, потому что он больше не переносит его. Чтобы исправить это, присвоите переключателям id и добавьте for="" атрибут на ярлык, содержащий тот же самый id ).

Кроме того, ваши переключатели должны иметь общий name , иначе все переключатели могут быть проверены одновременно.

Итак, чтобы исправить это, внесите изменения в соответствии с этим:

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="radio custom-control custom-radio">

  <div class="form-group">
    <input type="radio" class="custom-control-input" name="i" value="keep" id="i1" />
    <label class="custom-control-label" for="i1">Ändra inte lösenordet</label>
  </div>
  <div class="form-group">
    <input type="radio" class="custom-control-input" value="auto" name="i" id="i2" />
    <label class="custom-control-label" for="i2">Generera ett nytt lösenord automatiskt</label>
  </div>
  <div class="form-group">
    <input type="radio" class="custom-control-input" name="i" value="manual" id="i3" />
    <label class="custom-control-label" for="i3">Ange ett nytt lösenord manuellt</label>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" class="custom-control-input" name="password" id="password" placeholder="Ange ett lösenord manuellt">
  </div>

</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 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>

Комментарии:

1. Большое спасибо! Это сработало сразу. И спасибо за объяснение.

2. Но это почти незаметно.

Ответ №2:

Сейчас работает. Вам просто нужно было добавить id="customRadio" в свой ввод и в свои метки a for="customRadio" .

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


    <div class="radio custom-control custom-radio">

        <div class="form-group">
<input type="radio" class="custom-control-input" id="customRadio"><label class="custom-control-label" for="customRadio">Ändra inte lösenordet</label>
     </div>
     
        <div class="form-group">
            <input type="radio" id="customRadio1" class="custom-control-input" value="auto"><label class="custom-control-label" for="customRadio1">Generera ett nytt lösenord automatiskt</label>
        </div>
        
        <div class="form-group">
           <input type="radio" id="customRadio2" class="custom-control-input" value="manual" > <label class="custom-control-label" for="customRadio2">Ange ett nytt lösenord manuellt</label>
        </div>
        

        <div class="form-group">
            <input type="text" class="form-control" class="custom-control-input" name="password" id="password" placeholder="Ange ett lösenord manuellt">
        </div>
        
            
    </div>