jquery.custom-select.jsを使ってセレクトボックスをカスタマイズする方法【IE6も対応】｜DAD UNION

Webサイトを制作する中で、セレクトボックス（select）のデザインをカスタマイズしたいと思ったことはありませんか？特にデフォルトのセレクトボックスではサイト全体のデザインに馴染まないと感じることもあるでしょう。

この記事では、jQueryとCSSを使用してセレクトボックスをカスタマイズする方法を詳しく解説します。この手法はIE6などの古いブラウザにも対応しているため、幅広いプロジェクトで活用できます。

jquery.custom-select.jsを使ってセレクトボックス（select）をカスタマイズする方法をご紹介します。

Contents

セレクトボックス（select）をカスタマイズするCSSの記述
- select.cssファイルの調整
jquery.custom-select.jsを使ったJavaScriptの記述
- jquery.custom-select.jsファイル内の調整
セレクトボックスをカスタマイズするHTMLの記述
セレクトボックスをカスタマイズするjsのデモページ
まとめ

セレクトボックス（select）をカスタマイズするCSSの記述

まず、セレクトボックスの見た目を整えるためのCSSコードを記述します。select.cssファイルを読み込みます。必要に応じて変更して下さい。

<link rel="stylesheet" href="select.css" type="text/css" media="all" />
<style type="text/css">
<!--
body{
	font-size: 12px;
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
	color:#000000;
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.2em;
	text-align:center;
	padding:15px 0;
}
a{
	font-size:16px;
	text-decoration:none;
}
p{
	text-align:center;
}
#idWrap{
	width:235px;
	margin:0 auto;
	text-align:center;
}
-->
</style>

select.cssファイルの調整

以下は、select.cssファイル内でセレクトボックスのデザインを調整するコードの一部です。このコードをベースに、サイズや背景画像などを必要に応じて変更してください。

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

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

jquery.custom-select.jsを使ったJavaScriptの記述

次に、jQueryを使用してセレクトボックスをカスタマイズする方法を紹介します。まず、「jquery.min.js（1.6系）」と「jquery.custom-select.js」を読み込み、以下のコードを記述します。$.customSelect()を記述します。

<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> 
<script type="text/javascript">
    $(function() {
		$.customSelect();
    });
</script>

jquery.custom-select.jsファイル内の調整

「jquery.custom-select.js」ファイルでは、カスタマイズ対象のセレクトボックスを指定します。以下のコードを編集し、適切なname値を設定してください。

ファイル内4行目辺りの

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

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

セレクトボックスをカスタマイズするHTMLの記述

最後に、セレクトボックスをHTMLで記述します。以下は、name属性が「yyyy」と「mm」のセレクトボックスの例です。

<select name="yyyy" id="yyyy">

<option value="2012">2012</option>

<option value="2013">2013</option>

<option value="2014">2014</option>

</select>
<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>