更改“选择”突出显示的颜色 [英] Change 'select' highlight color

问题描述

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

谢谢

  htmlcode：
< div class =contactselect>< select id =contactdropdown> 
< option value =电子邮件>电子邮件表格< /选项> 
< option value =网站>网站表单< / option> 
< option value =创建>创建表单< / option>< / select> 
< / div> 
 
 csscode：
 .contactselect select {
 background：url（Images / ArrowO.png）no-repeat right＃000; 
 width：268px; 
 padding：5px; 
颜色：＃F7921C; 
 font-size：25px; 
 font-family：dumbledor; 
 line-height：1; 
 border：solid 4px＃F7921C; 
 border-radius：10px; 
 height：45px; 
 -webkit-appearance：none; 
} 
  

解决方案

好的，你不能在选择选项的时候改变悬停颜色通过操作系统而不是HTML，但你的第二个解决蓝色轮廓的答案如下：

添加 outline：none 到您的CSS：

  .contactselect select 
 {
 background：url（Images / ArrowO.png ）不重复权利＃000; 
 width：268px; 
 padding：5px; 
颜色：＃F7921C; 
 font-size：25px; 
 font-family：dumbledor; 
 line-height：1; 
 border：solid 4px＃F7921C; 
 border-radius：10px; 
 height：45px; 
 -webkit-appearance：none; 
概述：无; 
} 
  

这是 JS小提琴演示。

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

解决方案

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:

Add outline:none to your 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 .

这篇关于更改“选择”突出显示的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！