Html 如何更改打开的 Bootstrap 下拉切换的颜色?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11288998/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 01:23:05  来源:igfitidea点击:

How to change color of opened Bootstrap dropdown toggle?

htmlcsstwitter-bootstrap

提问by skrypalyk

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

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

enter image description here

在此处输入图片说明

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

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

Here is html 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>

My css,that I tried:

我的 css,我试过:

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

Where is problem in my selectors ?

我的选择器有什么问题?

采纳答案by Jared Farrish

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/

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

.opendoesn't exist in the element chain.

.open元素链中不存在。

And here is your fiddle with the border (which had both the .openand no border-styleor border-widthto style):

这是您对边框的摆弄(其中有 the.open和 noborder-styleborder-widthto 样式):

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

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

回答by Bimal Das

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

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

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

It solve my problem, maybe it will help you.

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

回答by midzer

This worked for me, too:

这对我也有用:

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

回答by Rogerio Soares

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

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

回答by osyan

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