HTMLカスタマイズの選択

Question

HTMLのカスタマイズされた選択コンボボックスを作成します。利用できるライブラリは何ですか？それとも、CSSを使ってどうやってできるのですか？

例：スタイルchomboボックスを申し込むGmailの

Answer 1

は、次のURLを参照してください。

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

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

Answer 2

<select>ボックスは、ブラウザ間で一貫してスタイリングすることは不可能です。何らかの選択ボックス置換スクリプトが必要になります。 Uniformのような、jQueryで利用可能ないくつかの素晴らしいものがあり、すべてのフォーム要素に素晴らしいスタイルを適用します。 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); 
      }) 
     }); 

これは、スタイブルオーバーレイを（スパン「選択オーバーレイ」に）配置して、選択ボックスを非表示にして上に座らせます。ユーザーがクリックすると、デフォルトの選択ボックスからオプションが取得され、変更されるたびにスパンが更新されます。

次回質問をしたときの試行を表示するとよいでしょう。