skrypalyk skrypalyk - 8 months ago 90
CSS Question

How to change color of opened Bootstrap dropdown toggle?

When Dropdown is opened - I want to change default color of it. I want to change border color and background using css.

enter image description here

Here is html code:

<div class="row menu">
<ul class="nav nav-pills pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle"
My reports
<span class="caret my-reports-caret"></span>
<ul class="dropdown-menu">
<li><%= link_to "Performance", performance_reports_path %></li>
<li class="divider"></li>
<li><%= link_to "Account settings", '#' %></li>

My css,that I tried:

.menu .nav-pills .dropdown .open .dropdown-toggle{
background-color: red;

Where is problem in my selectors ?


Here is your problem: .nav-pills .dropdown .open .dropdown-toggle {
    border: 1px solid blue;
} .nav-pills .dropdown .dropdown-toggle {
    border: 1px solid red;

.open doesn't exist in the element chain.

And here is your fiddle with the border (which had both the .open and no border-style or border-width to style):