HTML自定義選擇

Question

我想創建一個HTML自定義選擇組合框。有什麼庫可以做到這一點？或者如何使用CSS做到這一點？

舉例：註冊Gmail風格chombo箱

Answer 1

看到這個網址：

http://harvesthq.github.com/chosen/

http://twitter.github.com/bootstrap/components.html

Answer 2

<select>盒是不可能的跨瀏覽器一貫的風格。您需要某種選擇框替換腳本。有一些很好的jQuery可用，例如Uniform，它將很好的樣式應用於所有表單元素。 jQuery UI的也有這樣的模塊，但它仍然是目前測試...

Answer 3

下面是一個使用jQuery的一個想法：

$('#your-select-id').each(function(){ 
     var title = $('option:selected', this).text(); 
     if($('option:selected', this).val() != '' ) title = $('option:selected',this).text(); 
     $(this) 
      .css({'z-index':10,'opacity':0,'-khtml-appearance':'none'}) 
      .after('<span class="select-overlay">' + title + '</span>') 
      .change(function(){ 
       val = $('option:selected',this).text(); 
       $(this).next().text(val); 
      }) 
     }); 

這樣做是在（span「select-overlay」）中放置一個可分層的疊加層，並使選擇框不可見並坐在頂部。當用戶點擊它時，它們會從默認選擇框中獲得選項，並隨時更新範圍。

如果您在下一次提出問題時做出任何嘗試，都會很好。