How to style the dropdown UI in the basic html select element in React?

Question

      <select className="option-select">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
      </select>

Here is how the basic select is defined. How to target the dropdown list UI? For example, changing the default background of the dropdown.

EDIT:

I find that it does work in Chrome if I target the <option> element. But on firefox, it does not work.

You're pretty limited on the styling that you can apply to a <select> because its rendering is very much driven by the host OS. Your best bet is probably to use (or create) a custom component which mimics the behavior of a <select> using other HTML elements. The framework you're using (React) likely has many available 3rd party components for this. — David
– David, Commented Oct 31, 2021 at 19:56

Super Kai - Kazuya Ito · Accepted Answer · 2021-11-01 11:40:46Z

1

select {
  background: yellow    
}
option {
  color: red 
}

<select className="option-select">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

edited Nov 1, 2021 at 11:40

Super Kai - Kazuya Ito

42.7k23 gold badges257 silver badges256 bronze badges

answered Oct 31, 2021 at 19:56

Azu

1,5562 gold badges9 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bear Bile Farming is Torture Over a year ago

works on Chrome, not firefox

cloned Over a year ago

You can't style this on Firefox

Pete Shilling · Accepted Answer · 2021-10-31 19:53:23Z

0

It's possible to style the select menu 'button', but not the dropdown itself. To accomplish that you need to mimic the functionality with javascript. https://www.w3schools.com/howto/howto_custom_select.asp

answered Oct 31, 2021 at 19:53

Pete Shilling

1861 silver badge3 bronze badges

Comments

sh kashani · Accepted Answer · 2021-10-31 20:06:59Z

0

Just a few CSS properties can change dropdown appearance and it's better to use a react components library such as material-ui.

answered Oct 31, 2021 at 20:06

sh kashani

874 bronze badges

Collectives™ on Stack Overflow

How to style the dropdown UI in the basic html select element in React?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related