html - 開いた Bootstrap ドロップダウン トグルの色を変更するには?

Question

ドロップダウンが開いているとき - デフォルトの色を変更したい。cssを使って枠線の色と背景を変更したいです。

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

ここに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>

私が試した私のcss：

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

セレクターのどこに問題がありますか?

Answer 1

Bootstrap の最新バージョンを使用している場合は、このクラスを使用します。

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

それは私の問題を解決します、多分それはあなたを助けるでしょう.

Answer 2

これも私にとってはうまくいきました：

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

Answer 3

これがあなたの問題です：

#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要素チェーンには存在しません。

そして、ここにあなたの国境のフィドルがあります（これには the.openと noborder-styleまたはborder-widthto スタイルの両方がありました）：

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

Answer 4

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