如何在选择框下拉菜单上更改蓝色突出显示的颜色答案

【问题标题】：How to change colour of blue highlight on select box dropdown如何在选择框下拉菜单上更改蓝色突出显示的颜色
【发布时间】：2013-10-15 18:03:54
【问题描述】：

请问如何更改此下拉菜单中的蓝色突出显示？

link to select box demo

如果可能的话，我想将突出显示颜色更改为灰色。

select {
  border: 0;
  color: #EEE;
  background: transparent;
  font-size: 20px;
  font-weight: bold;
  padding: 2px 10px;
  width: 378px;
  *width: 350px;
  *background: #58B14C;
  -webkit-appearance: none;
}

#mainselection {
  overflow: hidden;
  width: 350px;
  -moz-border-radius: 9px 9px 9px 9px;
  -webkit-border-radius: 9px 9px 9px 9px;
  border-radius: 9px 9px 9px 9px;
  box-shadow: 1px 1px 11px #330033;
  background: url("http://www.danielneumann.com/wp-content/uploads/2011/01/arrow.gif") no-repeat scroll 319px 5px #58B14C;
}

<div id="mainselection">
  <select>
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

【问题讨论】：

可能重复：stackoverflow.com/questions/1667086/…
Change Select List Option background colour on hover 的可能副本
我不认为你可以。您可以设置单个选项的背景，但不能设置突出显示。您可能需要考虑 jQuery 插件，例如dev7studios.com/dropit
请参考这个[链接]stackoverflow.com/questions/6931129/change-color-of-selection
Suresh 的建议不起作用。

标签： css

【解决方案1】：

是的，您可以更改 select 的背景，但您将无法使用 CSS 更改突出显示颜色（悬停时）！

你有几个选择：

是将select 转换为ul, li 类型的选择，然后用它做任何你想做的事情。
使用 Choosen、Select2 或 jQuery Form Styler 等库。这些允许您以更广泛和跨浏览器的方式设置样式。

【讨论】：

Select2 相当不错，使用 OS UX，但不要过度使用人们不知道如何使用的疯狂风格的选择器。但没有 +1 导致它没有真正回答 OP 提出的问题...
@ppumkin 你想说什么，伙计，我不确定？？
这仍然是真的吗？

【解决方案2】：

我相信您正在寻找 outline CSS 属性（结合 active 和 hover 伪属性）：

/* turn it off completely */
select:active, select:hover {
  outline: none
}

/* make it red instead (with with same width and style) */
select:active, select:hover {
  outline-color: red
}

轮廓、轮廓颜色、轮廓样式和轮廓宽度的完整详细信息 https://developer.mozilla.org/en-US/docs/Web/CSS/outline

【讨论】：

我认为这是背景高光而不是焦点轮廓
这根本不能回答问题 - OP 想要用另一种颜色替换浏览器的默认蓝色突出显示。

【解决方案3】：

在寻找解决方案时发现了这个。我只测试了 FF 32.0.3

box-shadow: 0 0 10px 100px #fff inset;

【讨论】：

select option:hover{ box-shadow: 0 0 10px 10px #e1358f inset; } 有效，但仅在 FF 中且仅当您的鼠标停留在该元素上时，当您离开选择框仍处于打开状态时，它会变为蓝色。
@CPHPython 也许可以使用类似select2
@Anima-t3d 谢谢，我对select2很熟悉，但我只是想限制插件数量的使用。
为原生选择元素设置样式非常棘手，我认为为此使用插件是最常见的用例之一。

【解决方案4】：

试试这个..我知道这是一篇旧帖子，但它可能会对某人有所帮助

select option:hover,
    select option:focus,
    select option:active {
        background: linear-gradient(#000000, #000000);
        background-color: #000000 !important; /* for IE */
        color: #ffed00 !important;
    }

    select option:checked {
        background: linear-gradient(#d6d6d6, #d6d6d6);
        background-color: #d6d6d6 !important; /* for IE */
        color: #000000 !important;
    }

【讨论】：

它只设计选中选项的背景，在悬停时不起作用。但无论如何它是有帮助的。

【解决方案5】：

当我们点击一个“输入”元素时，它会被“聚焦”在上面。为这个“焦点”动作移除蓝色荧光笔很简单，如下所示。要赋予它灰色，您可以定义一个灰色边框。

select:focus{
    border-color: gray;
    outline:none;
}

【讨论】：

是的，它会在选择聚焦时更改边框颜色。然而，盒子阴影也应该被覆盖：'box-shadow: 0 0 2px gray;'完全去除蓝色。
是的，我也在收听这个问题的广播
不适用于将鼠标悬停在选项上，而是将下拉菜单的整个背景变为此背景颜色。问的问题是我们如何更改默认的蓝色突出显示颜色。

【解决方案6】：

这适用于 firefox 和 chrome，优雅地回退到 IE 中的系统颜色。只需确保将 title 属性设置为选项的内容即可。它允许您设置背景和前景色。

select option:checked:after {
    content: attr(title);
    background: #666;
    color: #fff;
    position: absolute;
    width: 100%;
    left: 0;
    border: none;
}

【讨论】：

这是超级hacky，但它正是我想要的。谢谢 :)（也适用于 Electron，仅供参考）
在 chrome 63 或 firefox 57 中不工作...而且伪元素使用两个冒号？

【解决方案7】：

要同时设置悬停颜色的样式并避免 Firefox 中的操作系统默认颜色，您需要在选择选项和选择选项：悬停声明中添加一个 box-shadow，设置“选择选项”上的框阴影到菜单背景颜色。

select option {
  background: #f00; 
  color: #fff; 
  box-shadow: inset 20px 20px #f00
} 

select option:hover {
  color: #000; 
  box-shadow: inset 20px 20px #00f;
}

【讨论】：

这不会消除您在将光标移动到下拉选项上时获得的蓝色悬停颜色。
这是唯一对我有用的。虽然正如@klokop 提到的，它并没有摆脱蓝色悬停。

【解决方案8】：

尝试删除按钮中 :focus 类的框阴影，所附图像显示了它在引导程序中的情况。

.dropdown .btn:focus{
    box-shadow: none;
}

【讨论】：

【解决方案9】：

我刚刚发现这个网站为选择框提供了一个很酷的主题 http://gregfranko.com/jquery.selectBoxIt.js/

如果您对整体外观有疑问，可以尝试此主题 blue - yellow - grey

【讨论】：

【解决方案10】：

将此添加到您的 CSS 代码中，并使用您选择的颜色更改红色背景颜色：

.dropdown-menu>.active>a {color:black; background-color:red;}
.dropdown-menu>.active>a:focus {color:black; background-color:red;}
.dropdown-menu>.active>a:hover {color:black; background-color:red;}

【讨论】：