pallavidestiny22 pallavidestiny22 - 2 months ago 9
HTML Question

Styling the select element with appearance none css property

I am trying to style the select element with appearance:none property. My html and css is as in http://codepen.io/destinypallavi/pen/LRGoro



select#lstReports {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
background-color: #477928;
border: 2px solid blue;
display: inline-block;
width: 30px;
height: 30px;
/*position:relative;*/
}
select#lstReports + i {
color: #fff;
margin-left: -26px;
font-size: 10px;
vertical-align: middle;
}

<select id="lstReports">
<option>1</option>
<option>1</option>
<option>1</option>
</select>
<i class="fa fa-lg fa-chevron-down"></i>





I am able to achive the styling to somewhat. But in firefox, the default content of first tag is showing?
How can I remove the default option tag value to stop appearing on the styled select tag?
Thank you in advance for help and suggestions

Answer

For html 5 you can use hidden attribute to fix this.

<select id="lstReports">
  <option hidden></option>
  <option>06</option>
  <option>1</option>
  <option>1</option>
</select>

http://codepen.io/anon/pen/XjXLXO heres my codepen link

Comments