z-index issue when using bootstrap-select with input-group and form-control classes

Question

My code

I'm using Bootstrap 3 and bootstrap-select plugin.

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

Result

When closed:

When open:

Possible reason

bootstrap-select plugin generates the following HTML:

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

Bootstrap CCS has the following rule which aligns all form-control's inside .input-group at the same z-index:

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

Question

I want items in the dropdown to appear in front of the input fields, but they are rendered behind (see the above screenshots). Browser: Chrome 71.

How to fix this?

Answer 1

A correct HTML should be

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

The bootstrap-select plugin should have generated this class for you, but if it hasn't - just append the class manually. Example:

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

Result

Explanation

The bootstrap-select plugin has the following CCS rule which does the trick:

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