Change select background color in css

Question

My problem is simple, I have a dark background, and the default white color of select is too problematic.

I tried changing it with background-color but it doesn't work. The only solution I have is using box-shadow like that:

select { box-shadow: 0 0 10px 100px rgb(41,40,59) inset; color: rgb(200,200,200); }

But then, it hides the arrow.

(It also does it when I use another color, that's not the background's color fault.)

What can I do?

Does this answer your question? [Change select box option background color](https://stackoverflow.com/questions/12836227/change-select-box-option-background-color) — Ali Azmoodeh, Oct 18 '22 at 21:31

Laaouatni Anas · Accepted Answer · 2022-10-18T21:58:07.877

1

I tried with background-color seems to work fine, also with arrow.

if you mean style the childs of dropdown,
then use this selector ✅ option instead of ❌ select

select {
  background-color: blue; /* works fine */
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}


/* you can style childs like this */

select option {
  background-color: red;
}

<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

edited Oct 18 '22 at 21:58

answered Oct 18 '22 at 21:41

Laaouatni Anas

4,199
2
7
26

Okay, that worked. I don't know why but it didn't when I first tried background-color. I wonder why. – FoxBall Oct 18 '22 at 22:28

Change select background color in css

1 Answers1