もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第12回 jQueryでセレクトボックスをデザインする

この記事を読むのに必要な時間:およそ 5 分

デザインされたセレクトボックスを実装する

画像

セレクトボックスはCSSでほとんどスタイルを当てることができないので,フォームをデザインするときに苦労する方が多いのではないでしょうか。今回は,HTMLとCSS,そしてjQueryを利用して疑似セレクトボックスを作成してみましょう。

作成方法はとても簡単なので,覚えておけば色々なシーンで流用できるでしょう。

まずは,完成サンプルを見て作成するセレクトボックスのイメージを掴んでください。

疑似セレクトボックス

そもそもデフォルトのセレクトボックスの挙動は

  1. クリックするとプルダウンが表示
  2. プルダウンの項目をクリックする
  3. セレクトボックスの中身が選択した項目に置き換わる

というようになっているのでこれを実装していきます。

セレクトボックスは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を用意します。その中に

  1. a要素:セレクトボックス(見えているところ)
  2. div要素:プルダウン
  3. 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を表示しないようにします。

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/

コメント

コメントの記入