custom-select:セレクトボックスをカスタマイズするjs(恐らくIE6も対応)



セレクトボックスもデザインにあわせてカスタマイズして欲しいと要望があった際に使用しました。
(デフォルトのセレクトボックスでイイじゃんって、何度も心の中で思ってました)

 

1.ヘッダーとJavaScriptの記述

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.custom-select.js"></script>
<link rel="stylesheet" href="select.css" type="text/css" media="all" />
<script type="text/javascript">
    $(function() {
		$.customSelect();
    });
</script>

 

2.jquery.custom-select.jsの調整

ファイル内4行目辺りの

$('select[name^=yyyy], select[name^=mm]').each(function() {

「yyyy」「mm」がセレクトボックスのname値になるので適当に設定します。
 

3.select.cssの調整

CSSファイル内13行目

/* Custom Select */
dl.custom-select {
  position:relative;
  width:78px;
  height: 31px;
  font-size: 12px;
  text-align: left;
}

上記以降のサイズやpadding、背景画像等を調整します。
 

4.HTMLの記述

	<select name="yyyy" id="yyyy">
	<option value="2012">2012</option>
	<option value="2013">2013</option>
	<option value="2014">2014</option>
	</select><br>
	<select name="mm" id="mm">
	<option value="01">01</option>
	<option value="02">02</option>
	<option value="03">03</option>
	<option value="04">04</option>
	<option value="05">05</option>
	<option value="06">06</option>
	<option value="07">07</option>
	<option value="08">08</option>
	<option value="09">09</option>
	<option value="10">10</option>
	<option value="11">11</option>
	<option value="12">12</option>
	</select>

 
セレクトボックスをカスタマイズするjsのデモ
 

ここまでカスタムする必要あるんですかねと思ってしまいますが、
このこだわりがあるから、良いモノができるんでしょうね。
なるべく時間とコストが許す限り期待には応えたいですが。