![](/img/trans.png)
[英](Bootstrap) - Changing dropdown button text to reflect item clicked removes caret
[英]Changing the text color of a Bootstrap dropdown item
我正在嘗試更改下拉菜單元素的顏色。 下拉列表使用以下HTML:
<div class="btn-group">
<a class="btn">Confirm</a>
<a href="#" id="drop_thought" role="button" class="dropdown-toggle btn white-text" data-toggle="dropdown">v</a>
<ul class="dropdown-menu white-text" id="tools_drop" role="menu" aria- labelledby="drop_thought">
<li><a class="btn btn-success white-text">Okay</a></li>
<li><a class="btn btn-warning">Unload</a></li>
<li><a class="btn btn-danger">Quarantine</a></li>
<li class="divider"></li>
<li><a class="btn btn-primary">Permanent</a></li>
</ul>
</div>
我刪除了ID以便於閱讀。
我創建了一個類似以下的CSS類:
.white-text {
color: #FFFFFF; !important
}
我認為!important
會自動使Okay變成白色,但它仍然是黑色的。 我在Chrome的開發者控制台下<li><a>...</a></li>
帶有white-text
的隨附<li><a>...</a></li>
元素,似乎.dropdown-menu a
是它繼承的類。 出於某種原因,我的white-text
被忽略並且有一個突破。
使用下面的CSS,我能夠將文本顏色更改為白色,但我在另一個地方使用下拉菜單,所以我不能使用它:
.dropdown-menu a{
color: #FFFFFF; !important
}
以下是Chrome的繼承鏈:
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a - #ffffff
.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] - #ffffff
.btn:hover - #333333
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] - #333333 .dropdown-menu a - #333333
a:hover - #005580
.white-text - #FFFFFF
.btn-success - #ffffff
.btn - #333333
a - #0088cc
.white-text - #FFFFFF
body - #333333
分號在!important之后,否則它將不包含在該屬性中(CSS不處理空格/返回)。
正確使用:
.dropdown-menu a{
color: #FFFFFF !important;
}
http://css-tricks.com/when-using-important-is-the-right-choice/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.