更改“选择”突出显示颜色

Question

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

由于

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;
}

Answer 1

你不能改变选择选项的悬停颜色，因为它是由操作系统而不是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。

Answer 2

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

您可以通过更改css来更改所需内容。

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

Answer 3

在Firefox中，默认样式表是

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

问题在于，即使您使用!important，也无法覆盖内部重要媒体资源。

所以，基本上，你不能，除非你实现自己的用户界面。

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

Answer 4

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