セレクトボックスをカスタマイズする「Script.aculo.us Select Box」-JavaScript Library Archive

セレクトボックスをカスタマイズする「Script.aculo.us Select Box」

Script.aculo.us Select BoxはセレクトボックスをCSSでカスタマイズする為のJavaScriptライブラリです。

このライブラリを利用するにはPrototype.jsとscript.aculo.usが必要です。

ダウンロードしたPrototype.jsとscript.aculo.usをhead要素などで読み込みます。

<script type="text/javascript" src="script/prototype.js"> </script>
<script type="text/javascript" src="script/scriptaculous.js"> </script>

次にScript.aculo.us Select BoxよりダウンロードしたJavaScriptファイルselect.jsとautocomplete.cssを読み込みます。

<script type="text/javascript" src="script/select.js"></script>
<link href="styles/autocomplete.css" rel="stylesheet" type="text/css"></link>

セレクトボックスに任意のID名と「autocomplete」というclass属性を追加します。

<select id="任意のID" name="options" class="autocomplete">

セレクトボックスを記述後にscript要素でScript.aculo.us Select Boxを実行します。

<script type="text/javascript">
new Autocompleter.SelectBox('任意のID');
</script>

セレクトボックスがJavaScriptのアニメーションに切り替わったので、これでCSSで装飾が可能です。

付属のform.cssには簡単なデザイン例が載っていますので、これを参考にCSSを変更してみてください。