Macro Man Macro Man - 5 months ago 17
CSS Question

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

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

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>
<div id="result">
<center>Result Colour</center>


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 style="background-color:#ff0000;color:white">
    <input type="radio" value="#ff0000" name="col" /> Red
  <label style="background-color:#ffa500;color:white">
    <input type="radio" value="#ffa500" name="col" /> Amber
  <label style="background-color:#00b300;color:white">
    <input type="radio" value="#00b300" name="col" /> Green

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