將圖像添加到選擇自動增益中的選項

Question

我正在創建一種語言select，並且我無法在文本之前在option中顯示標誌。我使用的是twitter引導程序。這是什麼？我應該用什麼方法來添加它們？

<select class="select form-control"> 
    <option>Lithuanian</option> 
    <option>Russian</option> 
</select> 

我也做了一個簡單的標誌精靈和一些類來顯示它們。

.flag { 
    width: 16px; 
    height: 11px; 
    background:url(../img/flags.png) no-repeat 
} 

.flag.flag-lt {background-position: -16px 0} 
.flag.flag-ru {background-position: 0 -11px} 

Answer 1

這是不可能的樣式以這種方式（我想是因爲它實際上是呈現這些控件而不是瀏覽器的操作系統）標準select控制。

我覺得你最好的選擇是使用Twitter的引導的Dropdown插件，它使用ul & li元素，從而樣式每個項目的內容，你如何請。如果您需要將值發送回服務器，則需要使用隱藏字段& JavaScript來管理選定的值。