How to style Twitter Bootstrap's typeahead (e.g. set background color)

Question

How can I set a custom background color for e.g., the active item in the dropdown when using Bootstrap's "typeahead" autocomplete?

A minor problem, but one that has been frustrating me for a couple of hours!

I'm using Twitter Bootstrap in a Rails 3.2 app, via the bootstrap-sass gem.

I assumed this was controlled by the dropdown menu styling, but

$dropdownLinkBackgroundHover: $customColor;

does not work.

I also tried a more specific approach

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

but this also does not appear to work.

What am I overlooking? Or should my fixes be working, and the issue lies elsewhere?

Answer 1

First, it would appear that the :hover state is not used for the typeahead, but only the .active one, as seen in the javascript plugin (2.2.2 on github)

So if you change the color variable it has to be the $dropdownLinkColorActive variable (that will override all the dropdowns, whether there are from typeahead or not).

---

Secondly the little trick is that the background is not only set by the background-color, which is a fallback, but by the background-image as seen from the Less call to the Less mixin - code shown at the bottom.

And if you want to set a new color only to the dropdowns of typeahead, you have to override the color with the .typeahead +.dropdown-menu .active > a selector (at least for now).

Live demo (jsfiddle)

Here is what you have to override :

.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);
}

---

This is based on the original less version of Twitter Bootstrap 2.2.2, but it most surely is the same for the sass ported version.

For posterity, here is the less code referenced (version 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
  }
}