Html 更改“选择”突出显示颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23091015/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change 'select' highlight color
提问by Shoaib Raza
I have a customized drop down menu box (see picture) I want to change the highlight color on the options to get rid of the horrible blue and change it to a color of my choice, I would also like to stop the blue highlight box around the whole thing and remove the border from the options box. How do I go about removing any or all of these?
我有一个自定义的下拉菜单框（见图）我想更改选项上的突出显示颜色以摆脱可怕的蓝色并将其更改为我选择的颜色，我还想停止周围的蓝色突出显示框整个事情并从选项框中删除边框。我如何去删除任何或所有这些？
Thanks
谢谢
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;
}
回答by Shoaib Raza
Well you cannot change the hover color of select option as it is rendered by Operating System instead of HTML however your second answer for removing the blue outline is as under:
好吧，您无法更改选择选项的悬停颜色，因为它是由操作系统而不是 HTML 呈现的，但是您删除蓝色轮廓的第二个答案如下：
Add outline:noneto your css:
添加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;
}
Here is the JS Fiddle Demo.
这是JS Fiddle 演示。
回答by Nidhi
HTML will always restrict you to change on-hover color and also it will restrict to change button. So you have to make change it with the help of jQuery or Javascript so see this fiddle I have attached: http://jsfiddle.net/nsoni/n3xxX/
HTML 将始终限制您更改悬停颜色，也将限制更改按钮。所以你必须在 jQuery 或 Javascript 的帮助下进行更改，所以请参阅我附上的这个小提琴：http: //jsfiddle.net/nsoni/n3xxX/
Here you can change all you want by changing in css.
在这里，您可以通过更改css.
Otherwise no option to change that background color and button
否则无法更改背景颜色和按钮
回答by Oriol
In Firefox, the default stylesheet is
在 Firefox 中，默认样式表是
option:checked {
background-color: -moz-html-cellhighlight !important;
color: -moz-html-cellhighlighttext !important;
}
The problem is that you can't override an internal important property, even if you use !important.
问题是您无法覆盖内部重要属性，即使您使用!important.
So, basically, you can't, unless you implement your own UI.
所以，基本上，你不能，除非你实现你自己的 UI。
Edit: On some browsers, you can use a box-shadowtrick.
编辑：在某些浏览器上，您可以使用box-shadow技巧。
回答by WASasquatch
This is not possible if you want any sort of compatibility without jQuery or another framework. Try looking into these dropdown/select box plugins.. Most of these plugins will allow you to customize the style, and look, of your dropdown boxes.
如果您想要没有 jQuery 或其他框架的任何类型的兼容性，这是不可能的。尝试查看这些下拉/选择框插件。. 大多数这些插件将允许您自定义下拉框的样式和外观。
