Change select background color in css-CodePudding

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?

CodePudding user response：

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>