如何使用Bootstrap的typeahead（例如設置背景顏色）

Question

如何在使用Bootstrap的「typeahead」自動填充功能時爲下拉菜單中的活動項設置自定義背景顏色？

一個小問題，但一個令我感到沮喪的幾個小時！

我在Rails 3.2應用程序中使用Twitter Bootstrap，通過bootstrap-sass gem。

我以爲這是通過下拉菜單風格控制，但

$dropdownLinkBackgroundHover: $customColor; 

不起作用。

我也嘗試了更具體的辦法

.typeahead .active > a, .typeahead .active > a:hover { background-color: $customColor; } 

但這也不會出現工作。

我在忽略什麼？或者，如果我的修復工作正常，並且問題在別處？

Answer 1

首先，它會出現在:hover狀態不是用於預輸入，但只有.active之一，在javascript plugin (2.2.2 on github)

看到所以，如果你改變它是$dropdownLinkColorActive變量顏色變量（這將覆蓋所有下拉列表，無論是否存在從前端開始）。

---

其次小動作是背景不僅由background-color，這是一個回退設置，而是由background-image從Less call看出到Less mixin - 在底部示出的代碼。

如果你想要一個新的顏色設置爲僅預輸入的下拉菜單，可以選擇覆蓋與.typeahead +.dropdown-menu .active > a選擇的顏色（至少目前如此）。

Live demo (jsfiddle)

這裏是你必須覆蓋什麼：

.typeahead + .dropdown-menu .active > a, 
.typeahead + .dropdown-menu .active > a:hover { 
    color: #ffffff; 
    background-color: #FF77FF; 
    background-image: -moz-linear-gradient(top, #FF77FF, #FF44FF); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FF77FF), to(#FF44FF)); 
    background-image: -webkit-linear-gradient(top, #FF77FF, #FF44FF); 
    background-image: -o-linear-gradient(top, #FF77FF, #FF44FF); 
    background-image: linear-gradient(to bottom, #FF77FF, #FF44FF); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF77FF', endColorstr='#FF44FF', GradientType=0); 
} 

---

這是基於Twitter的引導2.2.2原來少了版本，但它確是相同的sass移植版本。

對於後人，這裏是更少的代碼引用（2.2.2版本）：

/* called in .dropdown-menu .active > a */ 
#gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%)); 

/* mixin */ 
#gradient { 
    .vertical(@startColor: #555, @endColor: #333) { 
    background-color: mix(@startColor, @endColor, 60%); 
    background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ 
    background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ 
    background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 
    background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 
    background-repeat: repeat-x; 
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down 
    } 
}