如何在 React 的基本 html 选择元素中设置下拉 UI 的样式？

Posted 2023-03-05

【中文标题】如何在 React 的基本 html 选择元素中设置下拉 UI 的样式？

【英文标题】：How to style the dropdown UI in the basic html select element in React?

【发布时间】：2021-12-15 18:43:31

【问题描述】：

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

这是基本选择的定义方式。如何定位下拉列表 UI？例如，更改下拉菜单的默认背景。

编辑：

如果我定位 <option> 元素，我发现它在 Chrome 中确实有效。但是在firefox上就不行了。

【问题讨论】：

您可以应用到<select> 的样式非常有限，因为它的呈现很大程度上是由主机操作系统驱动的。您最好的选择可能是使用（或创建）一个自定义组件，该组件使用其他 html 元素模仿 <select> 的行为。您正在使用的框架 (React) 可能为此提供了许多可用的 3rd 方组件。

【参考方案1】：

可以设置选择菜单“按钮”的样式，但不能设置下拉菜单本身的样式。要做到这一点，您需要使用 javascript 来模拟该功能。 https://www.w3schools.com/howto/howto_custom_select.asp

【参考方案2】：

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>

【讨论】：

适用于 Chrome，而不是 firefox

你不能在 Firefox 上设置样式

【参考方案3】：

只需几个 CSS 属性就可以改变下拉列表的外观，最好使用 material-ui 等 React 组件库。