pallavidestiny22 pallavidestiny22 - 1 month ago 4x
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

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;
select#lstReports + i {
color: #fff;
margin-left: -26px;
font-size: 10px;
vertical-align: middle;

<select id="lstReports">
<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


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

<select id="lstReports">
  <option hidden></option>
</select> heres my codepen link