Проблема z-index при использовании bootstrap-select с классами input-group и form-control

Question

Мой код

Я использую Bootstrap 3 и bootstrap-select плагин.

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">
            <i class="glyphicon glyphicon-user"></i>
        </span>
        <select class="form-control selectpicker">
            <option value="1" text="Test"></option>
            <option value="2" text="Test 2"></option>
            <option value="3" text="Test 3"></option>
        </select>
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="email" required class="form-control" placeholder="Email Adress"/>
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">https://stackoverflow.com/questions/</span>
        <input type="text" required="" class="form-control" placeholder="ID">
    </div>
</div>

Результат

При закрытии:

При открытии:

Возможная причина

Плагин выбора начальной загрузки генерируетследующий HTML:

<div class="dropdown bootstrap-select form-control open">...</div>

Bootstrap CCS имеет следующее правило, которое выравнивает все form-control внутри .input-group в одном z-index:

.input-group .form-control {
    z-index: 2;
    // ...
}

Вопрос

Я хочу, чтобы элементы в раскрывающемся списке отображались перед полями ввода, но они отображаются сзади (см. Скриншоты выше).Браузер: Chrome 71.

Как это исправить?

Answer 1

Правильный HTML должен быть

<div class="dropdown bootstrap-select input-group-btn form-control open">...</div>

Плагин bootstrap-select должен был сгенерировать этот класс для вас, но если нет - просто добавьте класс вручную. Пример:

<select class="form-control input-group-btn selectpicker">

Результат

Объяснение

Плагин bootstrap-select имеет следующее правило CCS, которое делает свое дело:

.bootstrap-select.form-control.input-group-btn {
    z-index: auto;
}