Comment changer la couleur de ouvert Bootstrap déroulant à bascule?

Quand Déroulante est ouverte je veux modifier la couleur par défaut. Je veux changer la couleur de la bordure et arrière-plan à l'aide de css.

http://i.imgur.com/w6WIN.png

Voici le code html:

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

Mon css,j'ai essayé:

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

Où est le problème dans mon sélecteurs ?

Peut-être que je suis confus, mais dropdown-toggle points à un a tag, mais la liste déroulante contenu lui-même est à l'extérieur que dans la ul.dropdown-menu élément?
oui, dropdown-toggle est uniquement pour l'ouverture du menu déroulant. - twitter.github.com/bootstrap/components.html#navs
Droit; regardez votre sélection: .menu .nav-pills .dropdown .open .dropdown-toggle ne pourrait-il pas être .menu .nav-pills .dropdown .dropdown-menu?
Vous ne comprenez pas ma question. Je vais vous donner un écran.
Non, faire un jsfiddle.net. Où est le .open-classés éléments? Le sélecteur n'a pas de sens.

OriginalL'auteur skrypalyk | 2012-07-02

1

Ici est votre problème:
```
#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 n'existe pas dans l'élément de la chaîne.

Et voici votre violon avec la frontière (qui avait à la fois .open et pas de border-style ou border-width de style):

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

Je veux vous poser une autre s'amincit - comment je peux faire, sélectionnez la liste regarder le même que celui des listes déroulantes ? Est-il possible d'utiliser simplement nav pilules dans des listes de sélection?
Vous avez juste besoin de cibler les éléments: jsfiddle.net/userdude/bdCMU/5

OriginalL'auteur Jared Farrish
37

L'utilisation de cette classe si vous utilisez la dernière version de Bootstrap.
```
    .dropdown-toggle:active, .open .dropdown-toggle {
        background:#FFF !important; 
        color:#000 !important;
    }
```
Il résoudre mon problème, peut-être vous aider.

fonctionne encore avec bootstrap 3.3.6
il m'a aidé, merci!

OriginalL'auteur Bimal Das

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

OriginalL'auteur osyan

Cela a fonctionné pour moi, trop:

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

OriginalL'auteur midzer

Ce travail pour moi:

/*
* 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;
}

de l'échantillon:
http://wp.rstecinfo.com.br/wp-content/uploads/2018/08/nav-pills.png

OriginalL'auteur Rogerio Soares

Vous devez vous connecter pour publier un commentaire.