デザインされたセレクトボックスを実装する
セレクトボックスはCSSでほとんどスタイルを当てることができないので，フォームをデザインするときに苦労する方が多いのではないでしょうか。今回は，HTMLとCSS，そしてjQueryを利用して疑似セレクトボックスを作成してみましょう。
作成方法はとても簡単なので，覚えておけば色々なシーンで流用できるでしょう。
まずは，完成サンプルを見て作成するセレクトボックスのイメージを掴んでください。
疑似セレクトボックス
そもそもデフォルトのセレクトボックスの挙動は
- クリックするとプルダウンが表示
- プルダウンの項目をクリックする
- セレクトボックスの中身が選択した項目に置き換わる
というようになっているのでこれを実装していきます。
セレクトボックスはselect要素とそれに内包されるoption要素（プルダウン部分）で構成されるので，それらを代替要素で構成し，プルダウンの表示などはjQueryに任せます。
セレクトボックスのHTML
疑似セレクトボックスのHTML
<div class="selectbox">
<a href="#" class="select"><span>疑似セレクトボックス</span></a>
<div class="pulldown">
<a href="#">疑似セレクトボックス</a>
<a href="#項目1">項目1</a>
<a href="#項目2">項目2</a>
<a href="#項目3">項目3</a>
<a href="#項目4">項目4</a>
<a href="#項目5">項目5</a>
</div>
<input type="hidden" name="selectbox" value="" />
</div>
まず疑似セレクトボックスに必要な要素をまとめるためのdiv.selectboxを用意します。その中に
- a要素：セレクトボックス（見えているところ）
- div要素：プルダウン
- input要素：選択されたデータを保存する
をそれぞれ入れておきます。optionのvalueにあたる部分はhrefの#に続けて入力しておきます。
CSSでデザインを適用する
スクリプトを書く前に，CSSでスタイルを適用しておきましょう。適用していくデザインは以下の通りです。
プルダウンには以下の画像を使用します。
- 通常時の画像
- hover時の画像
- focus時の画像
の3パターンの画像をCSS Spriteを利用して表示を切り替えます。まずはセレクトボックスの部分ですが，その前にdiv.selectboxにposition: relativeを定義しておきます。。
div.selectbox
div.selectbox {
display: inline-block;
*display: inline;
zoom: 1;
position: relative;
}
セレクトボックス部分
a.selectとその子要素
div.selectbox a.select {
border: solid #ddd 1px;
display: inline-block;
*display: inline;
zoom: 1;
width: 170px;
color: #262626;
text-decoration: none;
cursor: default;
}
div.selectbox a.select span {
padding: 0 22px 0 7px;
display: block;
height: 22px;
background: url(img/icon_select.gif) no-repeat right 0;
line-height: 22px;
cursor: default;
}
div.selectbox a.select:hover span { background-position: right -21px }
div.selectbox a.select_focus span { background-position: right -42px !important }
セレクトボックスはinline要素ですが，今回は代替で作成するため，inline要素だと高さが指定できずに，デザインをうまく適用することができません。floatを使ってしまうと，文字に挟まれた場合などに対応できなくなります。以上の理由でここでは「inline-block」を使っています。
inline-blockについて多くは記述しませんが
- だいたいのブラウザは display: inline-block; で使える
- IE用に display: inline; zoom: 1; を適用
- Firefox2系はinline-blockの子要素がblockになっていればOK
というような条件を満たしていれば，問題なく使うことができるでしょう。
プルダウン部分
同じようにプルダウン部分にもスタイルを適用します。
div.pulldownとその子要素
div.selectbox div.pulldown {
border: solid #bbb 1px;
width: 170px;
max-height: 150px;
position: absolute;
left: 0;
top: 28px;
background: #fff;
overflow: auto;
}
div.selectbox div.pulldown a {
border-bottom: solid #bbb 1px;
padding: 5px 8px;
display: block;
}
div.selectbox div.pulldown a.last-child {
border: none;
}
div.selectbox div.pulldown a:hover,
div.selectbox div.pulldown a.selected {
color: #666;
background: #eee;
text-decoration: none;
}
こちらはいたって簡単ですが，最後のa要素にはスクリプトを使ってlast-childを割り振り，borderを表示しないようにします。
