フォームのselectをスタイリッシュに彩るJavaScript「jQuery Stylish Select plugin」

formを使用する時にデフォルトのものだとちょっと味気ないです。
そんな時に今回のJavaScriptjQuery Stylish Select pluginを利用すると、selectを鮮やかにすることができます。

使用方法

jQuery Stylish Select pluginからjquery.stylish-select.js、stylish-select.cssをダウンロードします。
また、画像が2枚あります。（画像1、画像2）
これらを以下のように記述します。


<link rel="stylesheet" type="text/css" href="stylish-select.css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.stylish-select.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#id名').sSelect();
});	
</script>

※css内に画像を指定する場所があるので、適宜変更下さい。
あとは、formを書き込めば完成です。


<select id="id名">
	<option value="1">項目1</option>
	<option value="2">項目2</option>
	<option value="3">項目3</option>
</select>

※XPバージョンにするには上記をdiv id="win-xp"でくくる必要があります。

サンプル

Javascriptサンプルページ一覧

skuare.net