<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.
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>Just a few CSS properties can change dropdown appearance and it's better to use a react components library such as material-ui.
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