Styling the select element with appearance none css property

Question

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 achieve the styling to somewhat. But in firefox, the default content of first <option> tag is showing?
How can I remove the default option tag value to stop appearing on the styled select tag?

Answer 1

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