I'm trying to change the background color of my bootstrap dropdown menu to red when clicked, instead of the default blue.
<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>
Here is the code I have come up with:
.input-group .input-group-prepend .btn .dropdown-menu > li.open:focus {
background-color: red;
}
However, it appears that this code is incorrect. Can someone help me figure this out?