CODEWITHSUNDEEP
cssbootstrap-4
Michael Howell
Michael Howell

Reputation: 93

How can I change the click background color of a Bootstrap dropdown?

I am attempting to make the "on click" background color for my bootstrap dropdown menu red, 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>

The code I have gotten to is:

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

But this is clearly incorrect. Can anyone walk me through this?

Upvotes: 0

Views: 2603

Answers (1)

Karthik Ganesan
Karthik Ganesan

Reputation: 4222

You should use active instead of focus, and why not just use "dropdown-item" class like this

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

here is a fiddle for it https://jsfiddle.net/qz30w18o/1/

Upvotes: 4

Related Questions