如何将CSS应用于下拉菜单项

Question

我想为下拉菜单中的每个项目添加一个圆形符号。圆形符号的颜色取决于条件。如果启用=== 1，则符号应显示为绿色，否则应显示为红色。

   Group: <select value={this.state.group} onChange={(e) => this.setState({ group: e.target.value, provider: })}>
   <option value=''>Select</option>
{this.state.groups.map((item) => <option value={item.GRPID}><span><span style={item.active === 1?{color:'green'}:{color:'red'}}>●</span>{item.GRPName}</span></option>)}
                            </select>

这是我的代码，正在显示符号，但是我应用的CSS无法正常工作，并且当我们从下拉列表中选择一个项目时也显示了该符号，我也不需要它。

Answer 1

这里是一个代码框，显示一个简单的示例https://codesandbox.io/s/practical-snyder-m9egg

检查一下。