Tweet｜ ｜ ｜ ｜

[ 2分で読めて簡単導入できます]

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"でくくる必要があります。
フォームのselectをスタイリッシュに彩るJavaScript「jQuery Stylish Select plugin」サンプル

記事作成：2009年05月30日