Change 'select' highlight color [duplicate]

Question

This question already has answers here:

How to change colour of blue highlight on select box dropdown (9 answers)

Closed 9 years ago.

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

Answer 1

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 .

Answer 2

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.

Answer 3

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/

Here you can change all you want by changing in css.

Otherwise no option to change that background color and button

Answer 4

In Firefox, the default stylesheet is

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.

So, basically, you can't, unless you implement your own UI.

Edit: On some browsers, you can use a box-shadow trick.