单击后，引导选择在选择框中消失。仅在鼠标悬停时可见

Question

我在页面上有几个选择框。唯一的问题是，选择一个值后，它将变为空白。如果我将鼠标悬停在方框上，我只能看到它。

这是在点击之前：

这是在点击下拉列表后

在这里，我选择了“单身汉”并且可见

当我点击屏幕上的任何地方时，它会消失！

鼠标悬停时，它会重新出现！

这是我选择框的div：

<div class="form-group">
            <label class="col-md-4 control-label">Degree</label>
            <div class="col-md-4 selectContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-education"></i></span>
                    <select name="degreeselect" class="form-control selectpicker">
                        <option value=" " selected disabled>Select Degree</option>
                        <option>Bachelors</option>
                        <option>Masters</option>
                        <option>Doctorate</option>
                    </select>
                </div>
            </div>
        </div>

老实说，我不知道造成这种情况的原因。

Answer 1

自我注意：注意您在CSS中的修改！

我的样式表来自另一个页面，其中我有一个带有下拉按钮的Bootstrap导航栏。我在背景颜色为蓝色的地方定制了它，文字是白色的。

我在浏览器中检查了该页面，发现了这个：

.dropdown-toggle {
    color: #fff;
}

如此小的东西引起了如此巨大的麻烦，但我想通了！