如何在select框下拉菜单中更改蓝色突出显示的颜色
如何更改此下拉菜单中的蓝色突出显示？
链接到select框演示
这是代码：
<html> <head> <title></title> <style> 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("wp-content/uploads/2011/01/arrow.gif") no-repeat scroll 319px 5px #58B14C; } </style> </head> <body> <div id="mainselection"> <select> <option>Select an Option</option> <option>Option 1</option> <option>Option 2</option> </select> </div> </body> </html> 如果可能的话，我想将高亮颜色更改为灰色。
刚刚find这个，同时寻找解决scheme。 我只testing过FF 32.0.3
box-shadow: 0 0 10px 100px #fff inset;
我相信你正在寻找outline CSS属性（与活动和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
是的，你可以改变select的背景，但是你将无法通过使用CSS来改变高亮颜色（当你hover时）！
你有几个select：
-
是将
select转换成ul, litypes的select，并做任何你想要的这个。 -
使用类似Choosen ， Select2或jQuery Form Styler的库 。 这些允许您以更加宽泛和跨浏览器的方式进行样式devise。
要在Firefox中设置hover颜色和避免操作系统默认颜色的风格，您需要为select选项和select选项添加一个方块阴影：hover声明，将“阴影选项”上的方块阴影颜色设置为菜单背景颜色。
select option { background: #f00; color: #fff; box-shadow: inset 20px 20px #f00 } select option:hover { color: #000; box-shadow: inset 20px 20px #00f; }
这适用于Firefox和Chrome，优雅地回落到IE中的系统颜色。 只要确保将title属性设置为选项的内容即可。 它允许你设置背景和前景色。
select option:checked:after { content: attr(title); background: #666; color: #fff; position: absolute; width: 100%; left: 0; border: none; }
