デザインされたセレクトボックスを実装する
セレクトボックスはCSSでほとんどスタイルを当てることができないので，
作成方法はとても簡単なので，
まずは，
疑似セレクトボックス
そもそもデフォルトのセレクトボックスの挙動は
- クリックするとプルダウンが表示
- プルダウンの項目をクリックする
- セレクトボックスの中身が選択した項目に置き換わる
というようになっているのでこれを実装していきます。
セレクトボックスはselect要素とそれに内包されるoption要素
セレクトボックスの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.
- a要素：セレクトボックス
（見えているところ） - div要素：プルダウン
- input要素：選択されたデータを保存する
をそれぞれ入れておきます。optionのvalueにあたる部分はhrefの#に続けて入力しておきます。
CSSでデザインを適用する
スクリプトを書く前に，
プルダウンには以下の画像を使用します。
- 通常時の画像
- hover時の画像
- focus時の画像
の3パターンの画像をCSS Spriteを利用して表示を切り替えます。まずはセレクトボックスの部分ですが，
div.
div.selectbox {
display: inline-block;
*display: inline;
zoom: 1;
position: relative;
}
セレクトボックス部分
a.
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-blockについて多くは記述しませんが
- だいたいのブラウザは display: inline-block; で使える
- IE用に display: inline; zoom: 1; を適用
- Firefox2系はinline-blockの子要素がblockになっていればOK
というような条件を満たしていれば，
プルダウン部分
同じようにプルダウン部分にもスタイルを適用します。
div.
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;
}
こちらはいたって簡単ですが，
