＜select＞タグを使ったプルダウン選択メニューの見た目を変えるjQueryプラグインはよく見かけますが、＜option＞タグそれぞれにアイコンを付けることができたり、組み込み自体もシンプル簡単に実装することができそうな「jQuery.superselect」が良さげだったのでご紹介。
≫jQuery.superselect – a ＜select＞ enhancing plugin.
チュートリアルページに掲載されている実装の際のHTMLソースの記述は
◆HTML
<select id='theselect' onchange='$("#test").html("Select value is: "+$(this).val());'>
<option value='' rel='icon[silk/help.png]'>Choose a Flag...</option>
<option value='blue' rel='icon[silk/flag_blue.png]'>Blue Flag</option>
<option value='green' rel='icon[silk/flag_green.png]'>Green Flag</option>
<option value='red' rel='icon[silk/flag_red.png]'>Red Flag</option>
<option value='yellow' rel='icon[silk/flag_yellow.png]'>Yellow Flag</option>
<option value='orange' rel='icon[silk/flag_orange.png]'>Orange Flag</option>
</select>
<p id='test'>Select value is: </p>
<input type='button' onclick='$.fn.superselect.reset("theselect");' value='reset selectbox' />
＜option＞タグの属性「rel」を使って画像を指定して、SCRIPT側からアクションを実行します。
◆SCRIPT
$(function(){$('#theselect').superselect();});
実際の見た目は以下のようになります。（右側がカスタマイズ後）
全体の見た目も角丸を付けることができたり、＜select＞タグをいろいろと簡単に装飾することができそうです。
サイト上の＜select＞プルダウンをカスタマイズしたいときに是非。。。