Question

我有一个带有选项的select元素，在Firefox中不会显示。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

1 个答案: