css - 单击引导下拉菜单的背景颜色

Question

我正在尝试将引导下拉菜单的“单击时”背景色设为红色，而不是默认的蓝色。

<div class="input-group mb-3">
        <div class="input-group-prepend">
            <button class="btn btn-outline-danger dropdown-toggle" type="button" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false" id="dropdowns" id="chosen-q10">Make a Selection<span
                    class="caret"></span></button>
            <ul class="dropdown-menu" id="dropdown-q10">
                <li class="dropdown-item" data-value="#">1 (Strongly Disagree)</li>
                <li class="dropdown-item" data-value="#">2 (Disagree)</li>
                <li class="dropdown-item" data-value="#">3 (Neutral)</li>
                <li class="dropdown-item" data-value="#">4 (Agree)</li>
                <li class="dropdown-item" data-value="#">5 (Strongly Agree)</li>
            </ul>
        </div>
    </div>

我得到的代码是:

.input-group .input-group-prepend .btn .dropdown-menu > li.open:focus {
background-color: red;

但这显然是不正确的。谁能帮我解决这个问题？

Answer 1

你应该使用 active 而不是 focus，为什么不像这样使用“dropdown-item”类

.dropdown-item:active {
background-color: red;
}

这是一个 fiddle https://jsfiddle.net/qz30w18o/1/