Change 'select' highlight color

Question

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

Example

How is this dropdown constructed? As long as this is a regular dropdown (` — Nivas, Apr 15 '14 at 17:58
This is not something that can be changed using CSS alone. You'll have to either restructure your drop down as an `
` or `
` or use a Javascript/Jquery library/plugin — Dryden Long, Apr 15 '14 at 18:01
I have added my code. It is a regular dropdown menu. What plug'ins are recommended in this situation? — , Apr 15 '14 at 19:08

score 6 · Accepted Answer · edited Mar 16 '15 at 13:29

6

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 .

edited Mar 16 '15 at 13:29

maxx777

1,320
1
20
37

answered Apr 15 '14 at 19:39

Syed Shoaib Abidi

2,356
17
19

Since it seems like I won't be able to change the highlight colour natively I'll research some plug-ins, I am accepting your answer as it has resolved the surrounding blue box. Thanks – Apr 15 '14 at 19:48
It doesn't work... – Konrad Dec 04 '17 at 19:07
1

@i'myourhuckleberry It works in safari, chrome & firefox. I'm not sure what you are using. Check the fiddle. – Syed Shoaib Abidi Dec 06 '17 at 04:00
It doesn't work even on the fiddle. I use windows and the latest version of chrome. I solved this problem the other way using some 3rd party jquery plugin. I think it's not possible without javascript. I assume you use Mac rich guy... – Konrad Dec 06 '17 at 12:03

score 2 · Answer 2 · answered Apr 15 '14 at 19:30

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.

answered Apr 15 '14 at 19:30

WASasquatch

1,044
3
11
19

score 2 · Answer 3 · edited Jan 15 '16 at 21:59

2

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

edited Jan 15 '16 at 21:59

marc_s

732,580
175
1,330
1,459

answered Apr 15 '14 at 19:53

Nidhi

27
6

You can style buttons in CSS Select boxes, however, most likely do to their complexity have never had a style beyond the main container border. – WASasquatch Apr 16 '14 at 00:43

score 1 · Answer 4 · edited May 23 '17 at 12:25

1

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.

edited May 23 '17 at 12:25

Community

1
1

answered Apr 15 '14 at 19:20

Oriol

274,082
63
437
513

1

I'd take a look at [this](http://www.browsersupport.net/CSS/color%3A-moz-html-cellhighlight) before ever using that. Lol – WASasquatch Apr 15 '14 at 19:29
2

@JordanThompson No, I'm not telling to use that code. That's part of Firefox's internal stylesheet. – Oriol Apr 15 '14 at 19:30

Change 'select' highlight color

4 Answers4

Linked