BLOG

2025年最新！selectタグ不要！コピペで簡単！jQueryで作るカスタムドロップダウン

標準の<select>タグはデザインの自由度が低く、ブラウザごとに見た目が異なります。そこで、radioボタンとjQueryで作るカスタムドロップダウンを紹介します！モダンなUI、自由なカスタマイズ、複数対応が特徴。まずはデモをご覧ください！

1. デモで動作をチェック

以下のリンクよりドロップダウンを試してみてください。クリックで選択肢が開き、選択すると値が反映。開いている間、選択中のラベルがハイライトされます。複数ドロップダウンもスムーズに動作！

デモページ

このUIをあなたのサイトに実装したい？カスタマイズや複数対応は山キノコロリ WEB事業部までご相談を！

2. コンセプト

このドロップダウンは、<select>の代わりに<input type="text">と<input type="radio">を使用。以下の特徴があります：

  • クリックで開閉: 入力欄やラベルをクリックで選択肢を表示。
  • ラジオボタン: フォーム送信に対応、見た目は非表示で<span>選択肢</span>を強調。
  • カスタムデザイン: <select>風のUI、矢印アニメーション、ホバー効果。
  • ハイライト: 開いている間、ラベルに視覚的なフィードバック。
  • 複数対応: 複数のドロップダウンが独立して動作。

3. ソースコード

以下は、デモで使用したソースコードです。jQueryでシンプルに実装し、初心者でも簡単に試せます。コピーして試してみてください！

HTML

<div class="select-demo">
    <div class="select-wrapper">
        <label for="selectInput1">
            <input type="text" id="selectInput1" readonly placeholder="選択してください">
        </label>
        <div class="radio-dropdown">
            <label class="radio-option">
                <input type="radio" name="option1" value="オプション1-1">
                <span>オプション1-1</span>
            </label>
            <label class="radio-option">
                <input type="radio" name="option1" value="オプション1-2">
                <span>オプション1-2</span>
            </label>
            <label class="radio-option">
                <input type="radio" name="option1" value="オプション1-3">
                <span>オプション1-3</span>
            </label>
        </div>
    </div>
    <div class="select-wrapper">
        <label for="selectInput2">
            <input type="text" id="selectInput2" readonly placeholder="選択してください">
        </label>
        <div class="radio-dropdown">
            <label class="radio-option">
                <input type="radio" name="option2" value="オプション2-1">
                <span>オプション2-1</span>
            </label>
            <label class="radio-option">
                <input type="radio" name="option2" value="オプション2-2">
                <span>オプション2-2</span>
            </label>
            <label class="radio-option">
                <input type="radio" name="option2" value="オプション2-3">
                <span>オプション2-3</span>
            </label>
        </div>
    </div>
</div>

CSS

.select-demo {
    display: flex;
    padding: 10px;
}
.select-demo .select-wrapper {
    position: relative;
    display: inline-block;
    width: 200px;
    margin: 10px;
}
.select-demo input[type="text"] {
    width: 100%;
    padding: 8px 24px 8px 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    box-sizing: border-box;
    appearance: none;
    transition: background-color 0.3s, border 0.3s;
    outline: none;
}
.select-demo input[type="text"]:hover {
    background-color: #fdd;
    border: 1px solid #800;
}
.select-demo .radio-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 10;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
}
.select-demo .select-wrapper.open .radio-dropdown {
    display: block;
}
.select-demo .radio-option input[type="radio"] {
    display: none;
}
.select-demo .radio-option {
    display: block;
    margin: 0;
    padding: 0;
    cursor: pointer;
    font-size: 16px;
    color: #333;
}
.select-demo .radio-option input[type="radio"]:hover + span {
    background: #e0e0e0;
}
.select-demo .radio-option input[type="radio"]:checked + span {
    background: #e0e0e0;
}
.select-demo .radio-option span {
    display: block;
    padding: 8px 12px;
    transition: 0.3s;
}
.select-demo .select-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #333;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
    pointer-events: none;
}
.select-demo .select-wrapper.open::after {
    transform: translateY(-50%) rotate(180deg);
}

jQuery

jQueryを読み込むには、HTMLの<head>または<body>末尾に以下を追加：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

以下は、ドロップダウンの動作を制御するjQueryコードです：

jQuery(function($) {
    $('.select-wrapper').each(function() {
        var $wrapper = $(this);
        var $input = $wrapper.find('input[type="text"]').attr('aria-expanded', 'false');
        var $label = $wrapper.find('label');
        var $dropdown = $wrapper.find('.radio-dropdown');
        var $options = $wrapper.find('.radio-option');

        $input.add($label).on('click', function(e) {
            e.stopPropagation();
            $('.select-wrapper').not($wrapper).removeClass('open').find('label');
            $wrapper.toggleClass('open');
            $input.attr('aria-expanded', $wrapper.hasClass('open'));
        });

        $options.on('click', function(e) {
            e.stopPropagation();
            var $radio = $(this).find('input[type="radio"]');
            $radio.prop('checked', true).trigger('change');
        });

        $dropdown.find('input[type="radio"]').on('change', function() {
            $input.val($(this).val());
            $wrapper.removeClass('open');
            $input.attr('aria-expanded', 'false');
        });
    });

    $(document).on('click', function(e) {
        if (!$(e.target).closest('.select-wrapper').length) {
            $('.select-wrapper').removeClass('open')
                .end()
                .find('input[type="text"]').attr('aria-expanded', 'false');
        }
    });
});

4. カスタマイズのポイント

このコードはシンプルでカスタマイズが簡単です。以下のようなアレンジが可能です：

  • デザイン変更: CSSで色やフォントを変更（例: .radio-option span { color: navy; }）。
  • アニメーション: ドロップダウンにフェードイン（.radio-dropdown { opacity: 0; transition: opacity 0.2s; }）。
  • アクセシビリティ強化: キーボード操作（Enter/Spaceで開閉）を追加。

複雑なカスタマイズや複数ページ対応は、山キノコロリ WEB事業部にお任せください！

5. メリットと注意点

項目 メリット 注意点
デザイン 自由にカスタマイズ ブラウザ標準UIは利用不可
実装 jQueryで簡単 アクセシビリティを考慮
パフォーマンス 軽量で高速 大量選択肢に注意

6. まとめ

このカスタムドロップダウンは、デザインの自由度と使いやすさを両立。jQueryで簡単に実装でき、ブログやサイトにモダンなUIを追加できます。カスタマイズや実装のご相談は、山キノコロリ WEB事業部まで！

BACK