修改“活动"用于引导程序预先输入的 css [英] Modifying the "active" css for bootstrap's typeahead

问题描述

Bootstrap 在 2.2.1 中存在一个带有 typeahead 继承的错误 - 已在 2.2.2 中修复.

Bootstrap had a bug in 2.2.1 with inheritance for typeahead - that has been fixed in 2.2.2.

推荐答案

Bootstrap Typeahead 下拉列表动态生成以下 HTML:

The Bootstrap Typeahead dropdown dynamically generates the following HTML:

  <ul class="typeahead dropdown-menu">
      ...
      <li><a href="#">MATCHING RESULT</a></li>
      ...
  </ul>

适用的默认 CSS 规则也是一种样式下拉菜单.

The default CSS rule that applies is also the one styling drop down menus.

.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
    color: #333333;
    text-decoration: none;
    background-color: #0081c2;
    ...
}

因此要在不更改下拉菜单的情况下覆盖预先输入，您需要在此之后的某处添加一条规则.加载 bootstrap.css 后，我将我的放在一个单独的文件中.*

So to override the typeahead without changing the drop down menu, you'll need to add a rule somewhere after this one. I place mine in a separate file after I load the bootstrap.css.*

.typeahead .active > a,
.typeahead .active > a:hover {
    color: white;

    /* Change the typeahead background color here if you'd like */
    background-color: Green;

    /* Turns off the default background gradients */
    background-image: none;
}

*最佳实践建议您在投入生产时组合并最小化所有 CSS，但无论如何，此规则应在上述规则之后，除非您使其比 .dropdown-menu 规则更具体

这篇关于修改“活动"用于引导程序预先输入的 css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！