HTML「選擇」與固定圖標

Question

我有一個選擇選擇一個月。在下拉列表中，我只想顯示月份的名稱（例如一月，二月）。但在select（顯示選定值）的框中，我想顯示FontAwesome圖標（日曆），然後顯示所選月份的名稱。

這就是我想的下拉列表中選擇關閉樣子

我得到了這一點，但我的下拉列表就是這樣

而且我希望它像那樣（沒有日曆圖標）

我的代碼：

<select> 
    <option value="all">&#xf133; All</option> 
    <option value="m01">&#xf133; January</option> 
    <option value="m02">&#xf133; February</option> 
</select> 

我怎麼能這樣做？

Answer 1

看看這個。

http://jsfiddle.net/afshinprofe/qhCsJ/1/

這正是你需要做什麼。將你的選擇包裹在一個容器中，然後給出一個帶填充的背景圖像，不要重複，就像你爲了輸入文本一樣。

<div class="selectParent"> 
    <select> 
      <option value="1">Option 1</option> 
      <option value="2">Option 2</option>   
    </select> 
</div> 

，然後CSS將

.selectParent{ 
    width:80px; 
    overflow:hidden; 


} 

.selectParent select{ 
    width:100px; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    padding: 2px 2px 2px 20px; 
    border: none; 
    background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat left center; 

}