将bootstrap-select与input-group和form-control类一起使用时的z-index问题

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>

结果

关闭时：

打开时：

可能的原因

bootstrap-select插件生成以下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;
}