更改“选择”突出显示颜色[重复]答案

【问题标题】：Change 'select' highlight color [duplicate]更改“选择”突出显示颜色[重复]
【发布时间】：2014-05-30 05:43:04
【问题描述】：

我有一个自定义的下拉菜单框（见图）我想更改选项上的突出显示颜色以摆脱可怕的蓝色并将其更改为我选择的颜色，我也想停止蓝色突出显示整个事物周围的框并从选项框中删除边框。我如何去删除任何或所有这些？

谢谢

htmlcode:
<div class="contactselect"><select id="contactdropdown">
<option value="Email">Email Form</option>
<option value="Website">Website Form</option>
<option value="Creation">Creation Form</option></select>
</div>

csscode:
.contactselect select{
   background: url(Images/ArrowO.png) no-repeat right #000;
   width:268px;
   padding:5px;
   color:#F7921C;
   font-size:25px;
   font-family:dumbledor;
   line-height:1;
   border:solid 4px #F7921C;
   border-radius:10px;
   height:45px;
   -webkit-appearance:none;
}

【问题讨论】：

既然您已经发布了图片，我建议您使用 Photoshop。如果您想在代码中更改它，请显示您的代码。
这个下拉菜单是如何构建的？只要这是常规下拉菜单 (<select>)，就无法更改高亮颜色。
这不是单独使用 CSS 可以改变的。您必须将下拉菜单重组为 <ol> 或 <ul> 或使用 Javascript/Jquery 库/插件
我已经添加了我的代码。这是一个常规的下拉菜单。这种情况推荐什么插件？

标签： html css highlight

【解决方案1】：

HTML 将始终限制您更改悬停颜色，也将限制更改按钮。所以你必须在 jQuery 或 Javascript 的帮助下进行更改，所以请参阅我附上的这个小提琴：http://jsfiddle.net/nsoni/n3xxX/

在这里您可以通过更改css来更改您想要的所有内容。

否则无法更改背景颜色和按钮

【讨论】：

您可以在 CSS 选择框中设置按钮样式，但是，由于它们的复杂性，很可能从未有超出主容器边框的样式。

【解决方案2】：

好吧，您无法更改选择选项的悬停颜色，因为它是由操作系统而不是 HTML 呈现的，但是您删除蓝色轮廓的第二个答案如下：

将outline:none 添加到您的CSS：

.contactselect select
{
   background: url(Images/ArrowO.png) no-repeat right #000;
   width:268px;
   padding:5px;
   color:#F7921C;
   font-size:25px;
   font-family:dumbledor;
   line-height:1;
   border:solid 4px #F7921C;
   border-radius:10px;
   height:45px;
   -webkit-appearance:none;
    outline: none;
}

这里是JS Fiddle Demo。

【讨论】：

由于我似乎无法在本地更改突出显示颜色，因此我将研究一些插件，我接受您的回答，因为它已经解决了周围的蓝色框。谢谢
不行……
@i'myourhuckleberry 它适用于 safari、chrome 和 firefox。我不确定你在用什么。检查小提琴。
它甚至在小提琴上也不起作用。我使用 windows 和最新版本的 chrome。我使用一些 3rd 方 jquery 插件以另一种方式解决了这个问题。我认为没有javascript是不可能的。我假设您使用 Mac 有钱人...

【解决方案3】：

在 Firefox 中，默认样式表是

option:checked {
    background-color: -moz-html-cellhighlight !important;
    color: -moz-html-cellhighlighttext !important;
}

问题是你不能覆盖一个内部的重要属性，即使你使用!important。

所以，基本上，你不能，除非你实现自己的 UI。

编辑：在某些浏览器上，您可以使用box-shadow trick。

【讨论】：

我会先看看this，然后再使用它。大声笑
@JordanThompson 不，我不是说要使用该代码。这是 Firefox 内部样式表的一部分。

【解决方案4】：

如果您想在没有 jQuery 或其他框架的情况下获得任何类型的兼容性，这是不可能的。尝试查看 these dropdown/select box plugins.。这些插件中的大多数都允许您自定义下拉框的样式和外观。

【讨论】：