セレクトボックスをカスタマイズするjavascript【Select Box】

セレクトボックスをカスタマイズするjavascript【Select Box】

イメージ

今回ご紹介するのは、セレクトボックスをカスタマイズするjavascriptです。

cssのみでセレクトボックスをカスタマイズしようとすると、ボーダーや背景色ぐらいしか変更できないなぁと思っていましたが、javascriptと併用するば、もっとデザインを施すことができるようです。

サンプルはこちら

使用方法

ダウンロード

以下のjavascriptをダウンロードします。

script.aculo.usについては、effects.jsなど一式を使用しますのでご注意を。

htmlへの記述

ダウンロードしたjavascriptをhead内への記述します。

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

body内への記述は以下になります。

<select id="options" name="options" class="combo">
<option value="1">option 1</option>
option value="2">option 2</option>
<option value="3" selected="selected">option 3</option>
<option value="4">option 4</option>
</select>
<script type="text/javascript">
new Autocompleter.SelectBox('options');
</script>

CSS記述

cssについては、デザインによって適宜変更してください。

div.autocomplete {
	width: 300px;
	background: #000000;
	text-align: left;
}
div.autocomplete ul {
	list-style-type:none;
	margin: 0;
	padding: 0;
}
div.autocomplete ul li.selected { 
	background: #CCCCCC;
	color: #000000;
}
div.autocomplete ul li {
	list-style-type: none;
	margin: 0;
	padding: 0;
	color: #FFFFFF;
	text-indent: 0.5em;
	cursor: pointer;
}

.combo {
	width: 300px;
	height:30px;
	border: none;
	background: url('bg_select.gif') no-repeat 0 0;
	font-size: 20px;
	color: #FFFFFF;
	cursor: pointer;
	text-indent: 0.5em;
}

参考URL

Script.aculo.us Select Box

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ