How can I remove the hover colour from html select object?

Question

I'm trying to make a simple colour picker using html/css with just four colours - so far so good.

What's annoying me is that when you hover over an option in the dropdown, it changes to blue because of the hover state - but I can't seem to disable this in the css.

I've tried the select:hover and option:hover properties but nothing seems to work. Is there an alternative to this without using a library that will achieve the same effect?

function changeColor() {
 var c = this.options[this.selectedIndex].value;
  document.getElementById("result").style.backgroundColor = c;  
}

document.getElementById("colourPicker").addEventListener("change", changeColor);

body {
  font-family: Arial, sans-serif;
}

#colourPicker {
  width: 50px;  
}

#result {
  padding: 20px 20px 20px 20px;
  border: 1px solid black;
}

.white {
  background-color: #ffffff;
}

.red {
  background-color: #ff0000;
}

.amber {
  background-color: #ffa500;
}

.green {
  background-color: #00b300;
}

<div id="test">
Pick a colour:
<select id="colourPicker">
  <option value="#ffffff" class="white"></option>
  <option value="#ff0000" class="red"></option>
  <option value="#ffa500" class="amber"></option>
  <option value="#00b300" class="green"></option>
</select>
</div>
<br><br>
<div id="result">
<center>Result Colour</center>
</div>

I don't think you can change the behavior of the native dropdown with CSS. You should replace it with HTML elements, perhaps using a plugin like Select2. — Barmar, Sep 14 '16 at 19:41
Possible duplicate of [Change Select List Option background colour on hover in html](http://stackoverflow.com/questions/17740391/change-select-list-option-background-colour-on-hover-in-html) — Native Coder, Sep 14 '16 at 19:41
Don't do that. Please. Don't. On mobile, all you get is blank options with no indication of what they mean at all. Just use ``... — Niet the Dark Absol, Sep 14 '16 at 19:44
@NiettheDarkAbsol I need to restrict the colour options to just these 4 though, which I don't believe is possible with the html5 input type? Also is it cross-browser compatible? — SierraOscar, Sep 14 '16 at 19:45
In that case, I would suggest radio buttons. These will be much easier to style. (But in general, yes, `` is supported by all modern browsers) — Niet the Dark Absol, Sep 14 '16 at 19:47
@NiettheDarkAbsol not a bad suggestion, and would be more UX friendly - I'll give it a whirl — SierraOscar, Sep 14 '16 at 19:48

score 2 · Accepted Answer · answered Sep 14 '16 at 19:53

In addition to the problems you are already facing, your current design falls apart entirely when viewed on mobile. Mobile devices generally present a special UI overlay featuring the available options and a radio button for each, and in this case it's just four blank options.

Consider instead using... radio buttons! You can use labels to show off the colour options. For example...

.colourchoices>label {
  display: inline-block;
  border: 1px solid #000;
  border-radius: 4px;
  padding: 2px 4px 2px 2px;
}

<p class="colourchoices">
  <label style="background-color:#ffffff">
    <input type="radio" value="#ffffff" name="col" />White
  </label>
  <label style="background-color:#ff0000;color:white">
    <input type="radio" value="#ff0000" name="col" /> Red
  </label>
  <label style="background-color:#ffa500;color:white">
    <input type="radio" value="#ffa500" name="col" /> Amber
  </label>
  <label style="background-color:#00b300;color:white">
    <input type="radio" value="#00b300" name="col" /> Green
  </label>
</p>

Notice how this gives you as much freedom as you like with regards to styling the elements.

This is simple and effective which is the kind of alternative I was hoping for. Thanks very much — SierraOscar, Sep 14 '16 at 19:56

score 1 · Answer 2 · edited May 23 '17 at 12:33

1

You can't currently style the options in a drop down. The best option you have is to use an un-ordered list and some CSS magic. Check this out

edited May 23 '17 at 12:33

Community

1
1

answered Sep 14 '16 at 19:42

Native Coder

1,792
3
16
34

1

i'm going to take a slightly different approach, but this essentially answers my question in that it isn't possible. – SierraOscar Sep 14 '16 at 19:49
there's always more than one way to skin a cat :) You could use a library, as others have suggested. But yeah, it can't be styled at the moment. Each browser renders them their own way... – Native Coder Sep 14 '16 at 19:50
I'm trying to avoid using a library for something so trivial, but indeed there is always more than one way... :) – SierraOscar Sep 14 '16 at 19:51

How can I remove the hover colour from html select object?

2 Answers2