css - 修改引导程序预输入的“活动”css

Question

Bootstrap 在 2.2.1 中存在一个带有预输入继承的错误 - 已在 2.2.2 中修复。

Answer 1

Bootstrap Typeahead 下拉菜单动态生成以下 HTML：

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

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

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

因此，要在不更改下拉菜单的情况下覆盖预输入，您需要在此规则之后的某处添加一条规则。加载 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 规则更具体

Answer 2

这是 bootstrap.css 文件中的第 2838 行，只需将其更改为：

color: white;

如果您正在使用 .less 文件，我相信您将不得不在 dropdown.less 文件中进行一些挖掘。如果发生这种情况，只需快速搜索：“.dropdown-menu li > a:focus, .dropdown-submenu:hover > a {”，您就可以找到它。