javascript - 选择下拉菜单在 Firefox 中提供空白选项

Question

我有一个带有选项的选择元素，它在 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>