如何更改打开的 Bootstrap 下拉切换的颜色？答案

【问题标题】：How to change color of opened Bootstrap dropdown toggle?如何更改打开的 Bootstrap 下拉切换的颜色？
【发布时间】：2018-08-28 20:00:11
【问题描述】：

当 Dropdown 打开时 - 我想更改它的默认颜色。我想使用 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;
}

我的选择器哪里出了问题？

【问题讨论】：

也许我很困惑，但dropdown-toggle 指向a 标记，但下拉内容本身在ul.dropdown-menu 元素之外？
是的，下拉切换仅用于打开下拉菜单。 - twitter.github.com/bootstrap/components.html#navs
对；看看你的选择器：.menu .nav-pills .dropdown .open .dropdown-toggle不应该是.menu .nav-pills .dropdown .dropdown-menu吗？
你不明白我的问题。我给你一个屏幕。
不，做一个jsfiddle.net。 .open-classed 元素在哪里？你的选择器没有意义。

标签： html css twitter-bootstrap

【解决方案1】：

如果您使用的是最新版本的 Bootstrap，请使用此类。

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

它解决了我的问题，也许它会帮助你。

【讨论】：

【解决方案2】：

这也对我有用：

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

【讨论】：

如果您有多个下拉菜单，最好的解决方案！

【解决方案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在元素链中不存在。

这是你对边框的摆弄（它既有.open 也没有border-style 或border-width 样式）：

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

【讨论】：

我想再问你一个问题——我怎样才能让选择列表看起来和这个下拉列表一样？是否可以只在选择列表中使用导航丸？

【解决方案4】：

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

【讨论】：

【解决方案5】：

这对我有用：

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

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

【讨论】：