如何更改已打开的Bootstrap下拉菜单的颜色？ [英] How to change color of opened Bootstrap dropdown toggle?

问题描述

当下拉菜单打开时 - 我想更改它的默认颜色。我想使用css更改边框颜色和背景。

When Dropdown is opened - I want to change default color of it. I want to change border color and background using 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;
}

我的选择器有问题？

推荐答案

这是您的问题：

#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 至样式）：

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/

这篇关于如何更改已打开的Bootstrap下拉菜单的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！