2

如何在使用 Bootstrap 的“typeahead”自动完成时为下拉菜单中的活动项目设置自定义背景颜色？

一个小问题，但让我沮丧了几个小时！

我通过 bootstrap-sass gem 在 Rails 3.2 应用程序中使用 Twitter Bootstrap。

我认为这是由下拉菜单样式控制的，但是

$dropdownLinkBackgroundHover: $customColor;

不起作用。

我还尝试了更具体的方法

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

但这似乎也不起作用。

我在看什么？还是我的修复程序应该起作用，而问题出在其他地方？

4

1 回答 1

7

首先，该状态似乎:hover不用于预输入，而仅用于预输入.active，如javascript 插件（github 上的 2.2.2）中所示

因此，如果您更改颜色变量，它必须是$dropdownLinkColorActive变量（这将覆盖所有下拉列表，无论是否有来自预输入）。

其次，小技巧是背景不仅由background-color作为后备的 . 设置，而且由 .background-image从对 Less 混音的Less 调用中可以看出-底部显示的代码。

而且，如果您只想为预先输入的下拉菜单设置新颜色，则必须使用选择器覆盖颜色（至少现在是这样）。.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 的原始 less 版本，但对于 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 回答