外観でselect要素をスタイリングするnone cssプロパティ

Question

私はappearance：noneプロパティでselect要素のスタイルを設定しようとしています。 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>

に私は多少のスタイリングを達成することができる午前として私のHTMLとCSSです。しかし、Firefoxでは、最初の<option>タグのデフォルトの内容が表示されていますか？
スタイリングされた選択タグに表示されなくなるデフォルトのオプションタグ値を削除するにはどうすればよいですか？

Answer 1

htmlの場合、これを修正するために隠し属性を使用できます。

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

http://codepen.io/anon/pen/XjXLXO HERESに私のcodepenリンク