在 Bootstrap 中更改悬停效果和字段选择的样式

Posted 2023-03-06

【中文标题】在 Bootstrap 中更改悬停效果和字段选择的样式

【英文标题】：Change styles of hover effect & field select in Bootstrap

【发布时间】：2012-11-25 05:46:04

【问题描述】：

我正在使用 twitter 引导程序和我自己的 CSS 来实现一些目标。

我想要做的是，所有输入字段，如用户名、密码和搜索，在选择它们时，边框变为蓝色，我想将其更改为黑色。

另一件事是，我正在使用反向导航栏。它有下拉菜单。当我单击下拉菜单并将鼠标悬停在元素列表上时，默认情况下它是蓝色的。我也在尝试将悬停的东西更改为黑色。我如何做到这一点？

现在这些是我尝试过的事情。我尝试使用 firebug 元素进行检查，它总是在 bootstrap.min 文件中显示一些内容。但是我找不到任何与悬停相关的东西，而且在过渡方面我有点虚弱，尽管我不确定它是否与过渡有关。我做的另一件事是，我从 variables.less 文件中将值 #08c 编辑为 #000 并编译它并获得了一个引导文件，其中包含更改的值但仍然只显示默认颜色。

请帮我实现这些效果。

谢谢！

【参考方案1】：

首先，我建议不要编辑引导样式表，除非您绝对必须这样做。更好的做法是在您自己的样式表中覆盖特定的引导类（确保您的样式表是网页加载的最后一个）。由于您使用的是 LESS，因此您还可以将引导样式表导入您自己的样式表中，并使用 @import "path/to/bootstrap.min.css" 之类的内容加载单个样式表

要更改下拉菜单中项目的颜色，您可以使用“元素：悬停”作为 CSS 选择器。在引导程序中，我相信它会是这样的：

.dropdown-menu > li > a:hover 
   /* styles */

更改“发光”表单的颜色有点复杂，因为它实际上不是边框。我建议您在此处查看有关此效果的简短文章：http://www.scriptcult.com/subcategory_97/article_635-glow-on-focus-input-form-fields.html

这个 jsfiddle 演示了覆盖默认下拉样式和上面文章中讨论的输入发光：http://jsfiddle.net/2UPan/3/

我希望这会有所帮助！

【讨论】：

是的，通常我从不乱编辑引导文件。没关系，我从你那里学到了关于骑马的事情。来自 jsfiddle 的那个例子有很大帮助。非常感谢您的整体帮助:)