ドロップダウンを選択すると、Firefoxで空白のオプションが表示されます

Question

Firefoxで表示されないオプションを含むselect要素があります。

これは、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}> 
 
    \t \t \t <option value="streetfighter" label="Street Fighter">Street Fighter 5</option> 
 
    \t \t \t <option value="tekken" label="Tekken">Tekken 7</option> 
 
    \t \t \t <option value="mvci" label="Marvel vs Capcom: Infinite">Marvel vs Capcom: Infinite</option> 
 
    \t \t </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>