在使用 Bootstrap 的“预先输入”自动完成功能时,如何为下拉列表中的事件项目设置自定义背景颜色?
一个小问题,但让我沮丧了几个小时!
我通过 bootstrap-sass gem 在 Rails 3.2 应用程序中使用 Twitter Bootstrap。
我以为这是由下拉菜单样式控制的,但是
$dropdownLinkBackgroundHover: $customColor;
不起作用。
我还尝试了一种更具体的方法
.typeahead .active > a, .typeahead .active > a:hover { background-color: $customColor; }
但这似乎也不起作用。
我忽略了什么?或者我的修复应该有效,但问题出在其他地方?
最佳答案
首先,:hover
状态似乎不用于提前输入,而仅用于 .active
状态,如 javascript plugin (2.2.2 on github) 中所示
因此,如果您更改颜色变量,它必须是 $dropdownLinkColorActive
变量(这将覆盖所有下拉菜单,无论是否来自预先输入)。
其次,小技巧是背景不仅由 background-color
设置,这是一个后备,而且由 background-image
设置,从Less call到 Less mixin - 代码显示在底部。
如果您只想为 typeahead 的下拉菜单设置新颜色,则必须使用 .typeahead +
.dropdown- 覆盖颜色menu .active > a
选择器(至少现在是这样)。
这是您必须覆盖的内容:
.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
}
}
关于ruby-on-rails - 如何设置 Twitter Bootstrap 的 typeahead 样式(例如设置背景颜色),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13992261/