CODEWITHSUNDEEP
javascripthtmlcssfirefox
denpa
denpa

Reputation: 129

Select drop down gives blank options in firefox

I have a select element with options inside that will not show when in Firefox.

enter image description here This should be showing 3 different options. In Chrome and Safari it works fine. I've been looking for a solution and nothing seems to work. Apparently this is a bug in Firefox. Here's the 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>

Upvotes: 0

Views: 1211

Answers (1)

Prashanth kumar
Prashanth kumar

Reputation: 985

This works totally fine if I run in Firefox, https://jsfiddle.net/prashu421/8b1w8afr/

can you share your CSS as well?

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

Upvotes: 1

Related Questions