[jQuery ] セレクトボックスのデザインを自由に変えたい

少し凝ったデザインのメールフォームを作るとき、セレクトボックスのスタイルに手を入れたいケースがあります
ただ、標準のselect/optionタグを使用した場合、下矢印を消したりするのにひと手間いりますし、そもそもブラウザによってセレクトボックスの見た目が大きく変わってしまいます
そんなときは、selectタグを使わずリストタグを使ってセレクトボックスもどきを作るという方法があります
hiddenタイプのinputタグとjQueryで挙動を制御すれば、フォームの部品として使い、データ送信することができます

サンプルコード

html

<div class="select_box">
    <input type="hidden" name="gosanke"></input>
    <div class="select_box_value"></div>
    <ul>
        <li data-value="フシギダネ">フシギダネ</li>
        <li data-value="ヒトカゲ">ヒトカゲ</li>
        <li data-value="ゼニガメ">ゼニガメ</li>
    </ul>
</div>

リストのliタグがセレクトボックスのアイテムになります。「data-value」属性に指定した値が、フォーム送信時に渡されるデータになります
「select_box_value」クラスには、現在選択中のアイテムが表示されます

CSS

.select_box {
    position: relative;
    width: 200px;
    border-top: 1px solid #3388dd;
    cursor: pointer;
}

.select_box > ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0px;
    padding: 0px;
    margin: 0px;
    width: 100%;
    list-style: none;
}

.select_box > ul.js_open {
    display: block;
}

.select_box_value,
.select_box > ul > li {
    padding: 0.5em 1em;
    margin: 0px;
    border: 1px solid #3388dd;
    border-top: none;
    text-align: center;
}

通常時、ulタグは非表示となります。ulタグに「js_open」クラスが付与されたときに表示することで、セレクトボックスを開いたような挙動になります

jQuery

jQuery(function($) {
    const selectBoxes = $('.select_box');
    const selectBoxItems = $('.select_box li');
    selectBoxes.find('.select_box_value').each(function() {
        const firstListItem = $(this).next('ul').find('li:first-child');
        $(this).prev('input').val(firstListItem.data('value'));
        $(this).text(firstListItem.text());
    });
    selectBoxes.click(function() {
        const selectBoxList = $(this).find('ul');
        if(selectBoxList.hasClass('js_open')) {
            selectBoxList.removeClass('js_open');
        }
        else {
            selectBoxList.addClass('js_open');
        }
    });
    selectBoxItems.click(function() {
        const selectBox = $(this).closest('.select_box');
        selectBox.find('input').val($(this).data('value'));
        selectBox.find('.select_box_value').text($(this).text());
    });
});

jQueryで以下の処理を行い、セレクトボックスらしい挙動を実現します
- セレクトボックスもどきの現在値を、先頭の選択肢の値で初期化する
- セレクトボックスもどきがクリックされたときに、リストに「js_open」クラスを付け外しする
- セレクトボックスもどきの選択肢がクリックされたときに、現在値を更新する
見かけ上の現在値は、「select_box_value」クラスに、liタグで囲まれたテキストを設定します
フォーム送信用の内部値は、inputタグのvalueに、liタグの「data-value」属性の内容を設定します

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。

[jQuery] セレクトボックスのデザインを自由に変えたい

サンプルコード

html

CSS

jQuery

ご質問など受け付けています