How to change color of opened Bootstrap dropdown toggle?

Question

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

Answer 1

This worked for me, too:

.dropdown-toggle[aria-expanded="true"] {
  background:#FFF !important;
  color:#000 !important;
}

Answer 2

This work for me:

/*
* nav-pills
*/
.nav-pills 
{
    padding-top: 2px;
    padding-bottom: 2px;
    height:32px;
}
.nav-pills > li 
{
    height:32px;
}
.nav-pills > li > a 
{
    padding-top: 6px;
    color: white;
    background-color: #4e5664;
    height:32px;
}
.nav-pills > li > a:hover, 
.nav-pills > li.hover > a 
{
    color: white;
    background-color: #337ab7;
}
.nav-pills > li.active > a 
{
    color: white;
    background-color: #337ab7;
}

/*
* nav-pills dropdown 
*/
.nav.nav-pills > li.dropdown.active.open > a, 
.nav.nav-pills > li.dropdown.active.open > ul.dropdown-menu a:hover,
.nav.nav-pills > li.dropdown.open > a, 
.nav.nav-pills > li.dropdown.open > ul.dropdown-menu a:hover 
{
    color: white;
    background-color: #337ab7;
}
.nav.nav-pills > li.dropdown.active.open > a, 
.nav.nav-pills > li.dropdown.active.open > ul.dropdown-menu a:hover,
.nav.nav-pills > li.dropdown.open > a, 
.nav.nav-pills > li.dropdown.open > ul.dropdown-menu a:hover 
{
    color: white;
    background-color: #337ab7;
}

/*
* nav-pills dropdown-menu
*/
.nav-pills > li > ul.dropdown-menu 
{
    background-color: #4e5664;
}
.nav-pills > li > .dropdown-menu > li > a {
    color: white;

    background-color: #4e5664;
}
.nav-pills > li > dropdown-menu > li > a:hover, 
.nav-pills > li > dropdown-menu > li.hover > a 
{
    color: white;
    background-color: #337ab7;
}
.nav-pills > li  > dropdown-menu > li.active > a 
{
    color: white;
    background-color: #337ab7;
}

sample: http://wp.rstecinfo.com.br/wp-content/uploads/2018/08/nav-pills.png

Answer 3

.nav-pills .open .dropdown-toggle, .nav > .open.active > a:hover {
    background-color:#222;
    border-color: #333;
    }

Answer 4

Here is your problem:

#original.menu .nav-pills .dropdown .open .dropdown-toggle {
    border: 1px solid blue;
}

#suggested.menu .nav-pills .dropdown .dropdown-toggle {
    border: 1px solid red;
}

http://jsfiddle.net/userdude/mjbN7/

.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):

http://jsfiddle.net/userdude/bdCMU/4/

Answer 5

Use this class if you are using the latest version of Bootstrap.

    .dropdown-toggle:active, .open .dropdown-toggle {
        background:#FFF !important; 
        color:#000 !important;
    }

It solve my problem, maybe it will help you.