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
How to change color of opened Bootstrap dropdown toggle?
提问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 更改边框颜色和背景。
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/
.open
doesn't exist in the element chain.
.open
元素链中不存在。
And here is your fiddle with the border (which had both the .open
and no border-style
or border-width
to style):
这是您对边框的摆弄(其中有 the.open
和 noborder-style
或border-width
to 样式):
回答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;
}