2

Bootstrapの「先行入力」オートコンプリートを使用するときに、ドロップダウンのアクティブなアイテムなどのカスタム背景色を設定するにはどうすればよいですか？

小さな問題ですが、数時間私を苛立たせている問題です！

Rails3.2アプリでbootstrap-sassgemを介してTwitterBootstrapを使用しています。

これはドロップダウンメニューのスタイルによって制御されていると思いましたが、

$dropdownLinkBackgroundHover: $customColor;

動作しません。

より具体的なアプローチも試しました

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

しかし、これも機能していないようです。

私は何を見落としていますか？または、修正が機能している必要があり、問題は他の場所にありますか？

4

1 に答える 1

7

まず、javascriptプラグイン（githubの2.2.2）に見られるように、:hover状態は先行入力に使用されておらず、1つだけに使用されているように見えます。.active

したがって、色変数を変更する場合は、$dropdownLinkColorActive変数である必要があります（これにより、先行入力があるかどうかに関係なく、すべてのドロップダウンが上書きされます）。

第二に、ちょっとしたコツは、背景がbackground-colorフォールバックである、によって設定されるだけでなく、下部に示されているLessミックスインへのLess呼び出しbackground-imageから見られるように設定されることです。

また、先行入力のドロップダウンにのみ新しい色を設定する場合は、セレクターで色をオーバーライドする必要があります（少なくとも今のところ）。.typeahead +.dropdown-menu .active > a

ライブデモ（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 Bootstrap 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
  }
}
于 2012-12-21T23:30:38.317 に答える