When the dropdown is open, it will have the open
class added to the parent dropdown element. You can use that to selectively style a closed / open dropdown.
For example, take the following HTML:
<!-- language: lang-html -->
<div class="dropdown">
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
We can add a color property to the dropdown and then change the color property when open using the following CSS: *(you might have to use !important
if the button is styled)
<!-- language: lang-css -->
.dropdown > button {
color: yellow;
}
.dropdown.open > button {
color: orange;
}
Which will look like this:
If you only wanted to change the style while closed you could use the :not
pseudo class selector like this:
<!-- language: lang-css -->
.dropdown:not(.open) > button {}