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

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 演示。