CODEWITHSUNDEEP
htmlcss
icecub
icecub

Reputation: 8783

Change background color of default (disabled) selected option

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>

Upvotes: 0

Views: 2175

Answers (1)

Jens Ingels
Jens Ingels

Reputation: 816

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>

Upvotes: 2

Related Questions