Change dropdown button colour on click

Question

So, I have a drop down menu like this:

<div class="sub-page-container">
    <div class="indented-box">
        <form class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <h4>Button Label</h4>
                    <div class="row form-group">
                        <div class="btn-group btn-group-lg" role="group" id="position-type">
                            <div class="btn-group btn-group-lg" role="group" id="position-type">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span> Other <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a href="#">
                                        <span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> Option A
                                    </a></li>
                                    <li><a href="#">
                                        <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span> Option B
                                    </a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

First let me apologise for the number of indentations. I know it's excessive, but it is necessary. Anyway, for explanation: sub-page-conainerand indented-box are my own classes and define no button-related content; of this I am confident. The reason this button group is nested inside another is that there are other buttons as well but they would only complicate an already complicated setup so I excluded them.

And I want to set button's background-color property when the menu is opened. Is it possible to do this in CSS, and if so, how would I do it?

Answer 1

When you use dropdowns you already do use jQuery, don't you?

Anyhow, when you take a look at the example on getbootstrap.com you can see (inspect dom) that at least two things change on toggle.

1. The button's attribute aria-expanded changes from true to false (and back).
2. The parent div's class is modified and the class open is added.

You can use either of these to target your button when dropdown is visible.

Solutions

1. button.btn[aria-expanded="true"] { background: red; }
2. .btn-group.open button.btn { background: red; }

Maybe you need to be more specific or add !important for your rules to be applied over the defaults.

Answer 2

If you want to change it only with css you could add the tab-index="1" to your button and use button:focus in css. Something like this.

HTML:

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" tab-index="1">
    <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span> Other <span class="caret"></span>
</button>
<ul class="dropdown-menu">
    <li><a href="#">
        <span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> Option A
    </a></li>
    <li><a href="#">
        <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span> Option B
     </a></li>
</ul>

CSS:

button:focus {
    background-color: red;
}

However you might want to check the bootstrap documentation and/or also try to achieve this with jQuery/javascript.

EDIT

Ooops... I mean tabindex not tab-index and it actually should work without that attribute as well as the button tag is of type input so you can have focus on it by default.

Answer 3

This is how I did it:

$(".dropdown-toggle").click(function () {
    $(this).toggleClass("btnBackground");
});

Here is the JSFiddle demo

Answer 4

You can do with jQuery

$( function() {
  $('button.btn-default').click( function() {
    $(this).css('background', '#aaa')
  } );
} );