选择下拉列表在Firefox中提供空白选项

Question

我有一个select元素，其中包含选项，在Firefox中不会显示。

这应该显示3个不同的选项。 在Chrome和Safari中可以正常运行。 我一直在寻找解决方案，但似乎没有任何效果。 显然，这是Firefox中的错误。 这是html。

 .select-field { display: inline-block; width: 100%; background-color: #005D5D; border-radius: .5em; margin: 0 auto; } .select-field>select { float: left; width: 100%; background-color: transparent; border: 0em; padding: .5em; font-size: 1em; color: white; background: url("./menu_arrow.svg") no-repeat 97% 50%; -moz-appearance: none; -webkit-appearance: none; appearance: none; } 

 <div id="games"> <div className="select-field"> <select onChange={this.props.gameProp}> <option value="streetfighter" label="Street Fighter">Street Fighter 5</option> <option value="tekken" label="Tekken">Tekken 7</option> <option value="mvci" label="Marvel vs Capcom: Infinite">Marvel vs Capcom: Infinite</option> </select> </div> </div> 

Answer 1

如果我在Firefox中运行，这工作得很好， https：//jsfiddle.net/prashu421/8b1w8afr/

您也可以共享CSS吗？

<div id="games">
            <div className="select-field">
                <select onChange={this.props.gameProp}>
                    <option value="streetfighter" label="Street Fighter">Street Fighter 5</option>
                    <option value="tekken" label="Tekken">Tekken 7</option>
                    <option value="mvci" label="Marvel vs Capcom: Infinite">Marvel vs Capcom: Infinite</option>
                </select>
            </div>
        </div>