引导下拉列表：悬停

Question

我对 google chrome 和 bootstrap 的 css 有问题

原来如此，在 HTML 中我只是设置了 bootstrap 的类

<div id ="SiteLanguage" style="margin-top:10px">            
    <asp:DropDownList 
        CssClass="selectpicker btn btn-primary dropdown-toggle" 
        id="ddlSiteLanguageSelect" 
        runat="server" AutoPostBack="true"
        OnSelectedIndexChanged="ddlSiteLanguageSelect_IndexChanged"> 
    </asp:DropDownList>            
</div>    

在 CSS 中我会覆盖引导程序的属性

select > option:checked, select > option:hover
{
    box-shadow: 0 0 10px 100px #dc6900 inset;
    background-color: #dc6900;
}

.selectpicker:hover, .btn:hover, .btn-primary:hover, .dropdown-toggle:hover, .dropdown-content a:hover
{
    background-color: #dc6900;
}

在 Mozzila 中，它看起来很棒，正如预期的那样，悬停颜色是深橙色

但在谷歌浏览器中......由于某种原因，从某个地方，悬停时它拖着蓝色，我无法弄清楚它是从哪里来的......

因此，经过几天的尝试、谷歌搜索、更改和切换……我已经没有想法在这里做什么了。你能给我一些建议吗？

谢谢

编辑：

我把问题上传到http://s000.tinyupload.com/index.php?file_id=47969215008672622206

谷歌驱动链接：https://drive.google.com/file/d/0Bza939idb7sJcmluWVhnX2VzNFE/view?ts=5785f7b5

在 Style 文件夹中：主文件是 Upitnici.css ， scripts 文件夹只包含库

如果您在 Mozzila 中打开 Problem.html，您会看到一切正常，在 google chrome 中，您会看到悬停在具有蓝色背景颜色的选项上

谢谢！

Answer 1

如果它是select 下拉列表，您可以更改选择的背景，但您将无法使用 css 更改突出显示颜色（当您悬停时）！ （适用于 Chrome 和其他 Webkit 浏览器）

您可能希望将 select 块更改为 ul、li 构造。

Answer 2

目前没有办法应用 css 来获得你想要的结果。 为什么不使用像 choosen 或 select2 这样的库。这些允许 您可以按照自己的方式设置样式。

如果您不想使用第三方库，那么您可以制作一个 简单的无序列表和一些 css 玩。这是你可以的线程 关注

How to convert <select> dropdown into an unordered list using jquery?

来源：https://stackoverflow.com/a/17742187/1194797

Answer 3

你不能在纯 CSS 中。

但是你可以使用 https://github.com/silviomoreto/bootstrap-select 或者 https://select2.github.io/

Answer 4

@Veljko89：收到您的源代码，但无法在 Google Chrome 中完成。我看到您通过插入框阴影实现，但这种方法仅适用于 FF。像许多答案一样，最好找到另一个解决方案，例如由 div 和列表创建的自定义选择。

Answer 5

似乎另一个类正在覆盖您的 css 代码，因此您可以使用 !important 标签设置高优先级

select > option:checked, select > option:hover
{
    box-shadow: 0 0 10px 100px #dc6900 inset;
    background-color: #dc6900 !important;
}

Answer 6

删除 > 并试试这个

select  option:checked, select  option:hover
{
    box-shadow: 0 0 10px 100px #dc6900 inset;
    background-color: #dc6900;
}