Change background color of default (disabled) selected option

Question

General info
Trying to make a custom designed selection list where the first option is the default one that shouldn't be selectable (disabled).

The problem
I can change the background color of the available options just fine. However, the default disabled option is given a grey background on dropdown. Once you hover the mouse over it and away again, the color changes to what it should be.

This seems to be a specific problem with using a combination of the option being selected and disabled. If you remove the disabled and/or selected attribute(s), the problem is gone.

How would I solve this issue?

What I tried myself to solve the issue
I tried changing the hover color of the options according to this question: Change Select List Option background colour on hover

I figured it might've something to do with this. However, the answers in that question didn't even work.

My code:

body {
  background: #41608c;
}
select {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 16px;
  width: 300px;
  height: 64px;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  margin-top: 1px;
  color: rgba(255, 255, 255, 1);
  appearance: none;
}
select option {
  background: rgba(46, 61, 87, 1);
}

<body>  
  <select>
    <option selected="selected" disabled>Default value</option>
    <option>Value 1</option>
    <option>Value 2</option>
  </select>
</body>

You should never have a selected & disabled on the same option. If you really want to prevent the user from taking the default option again you could disable it on change. Here's an example: https://jsfiddle.net/1nfyb9wt/ — Jens Ingels, Oct 24 '20 at 08:24
@JensIngels Thanks. I know how to work around the problem. I can even solve it with a label instead. I'm just wondering how this is happening. Something is giving the disabled option a default background color. My best guess would be that this is done by the OS. But if that's true, then why does it "fix" itself after hovering the option? I'm starting to wonder if this is actually a bug with browsers vs OS. — icecub, Oct 24 '20 at 08:33

Jens Ingels · Accepted Answer · 2020-10-24T09:08:35.440

To solve this issue without scripting you can't use disabled for your default option. Use hidden instead:

body {
  background: #41608c;
}
select {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 16px;
  width: 300px;
  height: 64px;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  margin-top: 1px;
  color: rgba(255, 255, 255, 1);
  appearance: none;
}
select option {
  background: rgba(46, 61, 87, 1);
}

<body>  
  <select>
    <option selected hidden>Default value</option>
    <option>Value 1</option>
    <option>Value 2</option>
  </select>
</body>

credit for description (Michał Mielec post)

Why not disabled?

When you use disabled attribute together with Reset value is not reset to original placeholder. Instead browser choose first not disabled option which may cause user mistakes.

If you still want the default option to appear in the selection menu you could further build upon this by giving it a disabled label option:

body {
  background: #41608c;
}
select {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 16px;
  width: 300px;
  height: 64px;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  margin-top: 1px;
  color: rgba(255, 255, 255, 1);
  appearance: none;
}
select option {
  background: rgba(46, 61, 87, 1);
}

<body>  
  <select>
    <option selected hidden>Default value</option>
    <option disabled>Default value</option>
    <option>Value 1</option>
    <option>Value 2</option>
  </select>
</body>

Thanks, I'll upvote this because it's an easy solution to work around the problem. But it's not an answer to the question, so for now I'm going to leave it open. — icecub, Oct 24 '20 at 08:34
No problem, to be honest, the exact answer for this particular question would be using the system for what it's not designed for. As the rule states, you cannot use both disabled & selected on the same option. Most likely you can encounter bugs in production if you are trying to force it that way. — Jens Ingels, Oct 24 '20 at 08:43
Here's some more info on how you could further customize your select tag. You could use a required attribute to prevent the user from not selecting an option. Sadly unlike input, there is no standard validation event that displays an invalid message for you. You do have access to the boolean that generates it. Here's an example: https://jsfiddle.net/a9o8edb1/ Good luck — Jens Ingels, Oct 24 '20 at 15:08
Alright, marking your answer as answered as you've put more than enough work into it and to be fair, my question should be reworded differently to get the answer I was looking for. Thanks once again, I do appreciate it! — icecub, Oct 24 '20 at 20:23

Change background color of default (disabled) selected option

1 Answers1