Change the highlight color

Question

I have a custom drop-down menu (see image). I want to change the highlight color to options to get rid of the terrible blue and change it to the color of my choice. I would also like to stop the blue highlight the box around the entire object and remove the border from the options window. How can I delete all or all of them?

thank

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 display color of the selection parameter, since it is displayed by the operating system instead of HTML, but your second answer for removing the blue outline looks like this:

Add outline:noneto 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

HTML , . jQuery Javascript, . , : http://jsfiddle.net/nsoni/n3xxX/

, , css.

Answer 3

Firefox :

option:checked {
    background-color: -moz-html-cellhighlight !important;
    color: -moz-html-cellhighlighttext !important;
}

, , !important.

, , , .

. box-shadow.

Answer 4

This is not possible if you need any compatibility without jQuery or another environment. Try to find these plugins dropdown menu / selection. . Most of these plugins allow you to customize the style and appearance of your drop-down lists.