How to change colour of blue highlight on select box dropdown

Question

How do I change the blue highlight on this dropdown please?

I'd like to change the highlight color to gray if this is possible.

select {
  border: 0;
  color: #EEE;
  background: transparent;
  font-size: 20px;
  font-weight: bold;
  padding: 2px 10px;
  width: 378px;
  *width: 350px;
  *background: #58B14C;
  -webkit-appearance: none;
}

#mainselection {
  overflow: hidden;
  width: 350px;
  -moz-border-radius: 9px 9px 9px 9px;
  -webkit-border-radius: 9px 9px 9px 9px;
  border-radius: 9px 9px 9px 9px;
  box-shadow: 1px 1px 11px #330033;
  background: url("http://www.danielneumann.com/wp-content/uploads/2011/01/arrow.gif") no-repeat scroll 319px 5px #58B14C;
}

<div id="mainselection">
  <select>
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

Possible duplicate: http://stackoverflow.com/questions/1667086/changing-select-highlight-color/1667105 — Guillaume Poussel, Oct 15 '13 at 18:06
possible duplicate of [Change Select List Option background colour on hover](http://stackoverflow.com/questions/10484053/change-select-list-option-background-colour-on-hover) — George, Oct 15 '13 at 18:08
I don't think you can. You can set background of individual options, but not the highlight. You may want to consider jQuery plugins e.g. http://dev7studios.com/dropit/ — Yuriy Galanter, Oct 15 '13 at 18:09
Please refer to this [link] http://stackoverflow.com/questions/6931129/change-color-of-selection — sbsekar, Oct 15 '13 at 18:14

Ilia Ross · Answer 1 · 2015-02-18T07:19:26.343

27

Yes, you could change the background of select but you will not be able to change the highlight color (when you hover) by using CSS!

You have few options:

Is to convert select into ul, li kind of select and do anything you want with this.
Use libraries like Choosen, Select2 or jQuery Form Styler . These allow you to style in much more broad and cross-browser way.

edited Feb 18 '15 at 07:19

answered Oct 15 '13 at 18:22

Ilia Ross

13,086
11
53
88

Select2 is pretty decent, using the OS UX but not overdoing it with crazy styled selectors that people just don't know how to use.. but no +1 cause its not really answering the question OP asked... – Piotr Kula Aug 11 '15 at 10:11
2

@ppumkin What do you want to say, pal, I'm not sure?? – Ilia Ross Aug 11 '15 at 10:12
1

Is this still true? – Nosajimiki Mar 22 '19 at 16:36

score 13 · Answer 2 · answered Nov 20 '14 at 01:01

13

I believe you are looking for the outline CSS property (in conjunction with active and hover psuedo attributes):

/* turn it off completely */
select:active, select:hover {
  outline: none
}

/* make it red instead (with with same width and style) */
select:active, select:hover {
  outline-color: red
}

Full details of outline, outline-color, outline-style, and outline-width https://developer.mozilla.org/en-US/docs/Web/CSS/outline

answered Nov 20 '14 at 01:01

Nick B

7,639
2
32
28

16

I think this is the background highlight and not the focus outline – James Westgate Apr 28 '16 at 14:22
2

This doesn't answer the question at all - the OP wants to replace the browser's default blue highlight with another color. – Luke May 29 '20 at 23:43

score 11 · Answer 3 · edited Oct 03 '14 at 15:58

11

Just found this whilst looking for a solution. I've only tested it FF 32.0.3

box-shadow: 0 0 10px 100px #fff inset;

edited Oct 03 '14 at 15:58

Chen-Tsu Lin

22,876
16
53
63

answered Oct 03 '14 at 15:49

Jason Wofford

119
1
2

4

`select option:hover{ box-shadow: 0 0 10px 10px #e1358f inset; }` works, but only in FF and only when your mouse stays on the element, it turns blue the moment you move away from the select box while it is still open. – Anima-t3d Dec 29 '14 at 20:41
1

@CPHPython Perhaps can use something like [select2](https://select2.org/) – Anima-t3d May 19 '18 at 08:37
@Anima-t3d thanks, I am familiar with select2, but I was just trying to limit the usage of the number of plugins. – CPHPython May 21 '18 at 08:29
Styling native select element is very tricky, I think using a plugin for this is one of the most common use cases. – Anima-t3d May 21 '18 at 14:25

tercou1 · Answer 4 · 2018-01-22T11:47:57.140

8

try this.. I know it's an old post but it might help somebody

select option:hover,
    select option:focus,
    select option:active {
        background: linear-gradient(#000000, #000000);
        background-color: #000000 !important; /* for IE */
        color: #ffed00 !important;
    }

    select option:checked {
        background: linear-gradient(#d6d6d6, #d6d6d6);
        background-color: #d6d6d6 !important; /* for IE */
        color: #000000 !important;
    }

edited Jan 22 '18 at 11:47

answered Jan 22 '18 at 11:33

tercou1

349
3
8

7

It styles only background of checked option, doesn't work on hover. But anyway it is helpful. – Olga Mar 29 '18 at 10:02

score 3 · Answer 5 · answered Feb 12 '19 at 16:12

3

When we click on an "input" element, it gets "focused" on. Removing the blue highlighter for this "focus" action is as simple as below. To give it gray color, you could define a gray border.

select:focus{
    border-color: gray;
    outline:none;
}

answered Feb 12 '19 at 16:12

Lekha B

77
3

Yes, it changes the border color when the select is focused. However, the box shadow should be overritten as well: 'box-shadow: 0 0 2px gray;' to remove the blue color entirely. – JCdotNET Sep 26 '19 at 08:38
yeah, i am also listening this radio of issue – Jovylle Jun 19 '20 at 09:25
Does not work for hovering over an option, instead this turns the entire background of the dropdown to this background color. The Question asked was how do we change the default blue highlight color. – JWP Aug 17 '20 at 15:46

score 2 · Answer 6 · answered Feb 17 '15 at 12:56

2

This works for firefox and chrome, falls back gracefully to the system color in IE. Just be sure to set the title property to the content of the option. It allows you to set the background and foreground colors.

select option:checked:after {
    content: attr(title);
    background: #666;
    color: #fff;
    position: absolute;
    width: 100%;
    left: 0;
    border: none;
}

answered Feb 17 '15 at 12:56

user1830605

129
1
2

1

This is super hacky but it does exactly what I wanted. Thank you :) (Works with Electron, too, FYI) – ShaneTheKing Jun 17 '17 at 03:27
1

Not working in chrome 63 or firefox 57... And pseudo-elements use two colons? – Alexander Dec 18 '17 at 21:13

score 2 · Answer 7 · edited May 21 '16 at 08:47

2

To both style the hover color and avoid the OS default color in Firefox, you need to add a box-shadow to both the select option and select option:hover declarations, setting the color of the box-shadow on "select option" to the menu background color.

select option {
  background: #f00; 
  color: #fff; 
  box-shadow: inset 20px 20px #f00
} 

select option:hover {
  color: #000; 
  box-shadow: inset 20px 20px #00f;
}

edited May 21 '16 at 08:47

Vojtech Ruzicka

16,384
15
63
66

answered May 21 '16 at 07:44

Guestation

45
3

10

This does NOT get rid of the blue hover colour you get when moving the cursor over the dropdown options. – klokop Jan 15 '18 at 14:58
This is the only one that worked for me. Although as @klokop mentioned, it does not get rid of the blue hover. – Shmuel Kamensky Dec 11 '18 at 19:06

ahmed · Answer 8 · 2018-03-29T10:20:10.413

-3

i just found this site that give a cool themes for the select box http://gregfranko.com/jquery.selectBoxIt.js/

and you can try this themes if your problem with the overall look blue - yellow - grey

edited Mar 29 '18 at 10:20

answered Mar 25 '18 at 02:23

ahmed

15
3

dimmat · Answer 9 · 2018-12-31T05:43:02.917

-4

Add this in your CSS code and change the red background-color with a color of your choice:

.dropdown-menu>.active>a {color:black; background-color:red;}
.dropdown-menu>.active>a:focus {color:black; background-color:red;}
.dropdown-menu>.active>a:hover {color:black; background-color:red;}

edited Dec 31 '18 at 05:43

answered Dec 30 '18 at 04:34

dimmat

195
1
3
10

How to change colour of blue highlight on select box dropdown

9 Answers9

Linked

Related