<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.

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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

CodePudding user response：

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