Webフォームでコンボボックスを実装したい場合、HTMLの標準要素から高機能なJavaScriptライブラリまで、さまざまな方法があります。
本記事では、HTMLのselect要素・datalist要素を使った基本的な実装から、JavaScriptとCSSを使ったカスタムコンボボックスの作り方まで、実際のコードを交えて詳しく解説していきます。
用途に合わせた最適な実装方法を選ぶための判断基準も紹介していきます。
HTMLのselect要素による基本的なドロップダウン実装
それではまず、HTMLの標準的な<select>要素を使ったドロップダウンの基本実装から解説していきます。
基本的なselect要素の使い方
<select>要素は、HTMLだけで実装できる最もシンプルなドロップダウンです。
基本的なselect要素の実装
<label for=”fruit”>好きな果物を選んでください</label>
<select id=”fruit” name=”fruit”>
<option value=””>選択してください</option>
<option value=”apple”>りんご</option>
<option value=”banana”>バナナ</option>
<option value=”orange”>みかん</option>
</select>
<label>要素とfor属性・id属性を対応させることで、ラベルクリック時にドロップダウンがフォーカスされるアクセシブルな実装になります。
グループ化したオプション（optgroup）
選択肢を論理的なグループに分けたい場合は、<optgroup>要素を使います。
optgroupを使ったグループ化の例
<select id=”city” name=”city”>
<optgroup label=”関東”>
<option value=”tokyo”>東京</option>
<option value=”yokohama”>横浜</option>
</optgroup>
<optgroup label=”関西”>
<option value=”osaka”>大阪</option>
<option value=”kyoto”>京都</option>
</optgroup>
</select>
optgroupのlabel属性に指定したテキストは、選択肢の見出しとして表示されます。
複数選択のselect要素
multiple属性を追加することで、複数選択可能なリストボックスとして機能します。
複数選択のselect要素
<select id=”skills” name=”skills” multiple size=”4″>
<option value=”html”>HTML</option>
<option value=”css”>CSS</option>
<option value=”js”>JavaScript</option>
<option value=”python”>Python</option>
</select>
size属性で表示する行数を指定でき、multiple属性を加えるとCtrl（Macでは⌘）クリックで複数選択できます。
datalist要素を使ったコンボボックスの実装
続いては、HTML5の<datalist>要素を使った、テキスト入力とオートコンプリートを組み合わせたコンボボックスの実装を確認していきましょう。
datalist要素の基本実装
<datalist>要素は、<input>要素と組み合わせることでコンボボックスに近い動作を実現します。
datalistを使ったコンボボックス実装
<label for=”lang”>プログラミング言語</label>
<input
type=”text”
id=”lang”
name=”language”
list=”languages”
placeholder=”言語名を入力または選択”
autocomplete=”off”>
<datalist id=”languages”>
<option value=”Python”>
<option value=”JavaScript”>
<option value=”Java”>
<option value=”C++”>
<option value=”Ruby”>
</datalist>
<input>のlist属性に<datalist>のidを指定することで連携します。
入力した文字列に部分一致する候補がドロップダウンで表示され、選択すると入力フィールドに反映されます。
datalistのメリットとデメリット
datalistはHTMLのみで実装できる手軽さが最大のメリットですが、いくつかのデメリットも知っておくことが重要です。
メリットとして、追加のライブラリ不要・軽量・基本的なアクセシビリティが組み込み済みという点があります。
デメリットとして、ブラウザによってデザインが異なりCSSでのカスタマイズに制限がある、候補の表示方法（完全一致・前方一致・部分一致）がブラウザ依存である、非同期での候補取得には別途JavaScriptが必要という点があります。
JavaScriptによるdatalistの動的更新
サーバーから動的に候補を取得してdatalistを更新するには、JavaScriptを使います。
JavaScriptによるdatalistの動的更新（概念コード）
const input = document.getElementById(‘lang’);
const datalist = document.getElementById(‘languages’);
input.addEventListener(‘input’, async () => {
const query = input.value;
const results = await fetch(`/api/suggest?q=${query}`);
const data = await results.json();
datalist.innerHTML = ”;
data.forEach(item => {
const option = document.createElement(‘option’);
option.value = item;
datalist.appendChild(option);
});
});
CSSとJavaScriptを使ったカスタムコンボボックスの実装
続いては、デザインを完全にカスタマイズできるJavaScriptとCSSを使った高度なコンボボックスの実装方法について確認していきましょう。
カスタムコンボボックスの基本HTML構造
カスタムコンボボックスの基本的なHTML構造は以下のような形になります。
カスタムコンボボックスのHTML構造
<div class=”combobox” role=”combobox” aria-expanded=”false”>
<input
type=”text”
class=”combobox-input”
aria-autocomplete=”list”
aria-controls=”listbox-id”>
<button class=”combobox-toggle” aria-label=”選択肢を開く”>
▼
</button>
<ul class=”combobox-list” id=”listbox-id” role=”listbox” hidden>
<li role=”option” tabindex=”-1″>りんご</li>
<li role=”option” tabindex=”-1″>バナナ</li>
</ul>
</div>
role・aria属性を適切に設定することで、スクリーンリーダーでも操作可能なアクセシブルな実装になります。
JavaScriptによるインタラクションの実装
カスタムコンボボックスのキーボード操作とドロップダウンの開閉をJavaScriptで実装します。
実装すべき主なインタラクションは、ボタンクリックでのリスト開閉、入力値に応じた候補の絞り込み、矢印キーでの選択移動、Enterキーでの選択確定、Escapeキーでのリスト閉鎖、フォーカスアウト時のリスト閉鎖です。
既存ライブラリの活用
カスタムコンボボックスをゼロから実装するのは、アクセシビリティ対応も含めると複雑です。
実績のあるライブラリを活用することが、品質と効率の観点から推奨されます。
React環境ではDownshift（自由度が高いhooks型）、react-select（豊富な機能・カスタマイズ性）、Headless UI（TailwindCSS対応）が代表的な選択肢です。
バニラJavaScriptではAccessible Autocomplete（UK Government製・高アクセシビリティ）などが活用できます。
CSSによるselectのスタイリング
続いては、標準のselect要素のデザインをCSSでカスタマイズする方法について確認していきましょう。
select要素の基本的なCSSスタイリング
HTMLのselect要素はCSSによるカスタマイズに制限がありますが、基本的な外観の変更は可能です。
select要素のCSSスタイリング例
select {
appearance: none; /* ブラウザデフォルトの見た目を削除 */
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px 32px 8px 12px;
font-size: 16px;
background-image: url(“data:image/svg+xml…”); /* カスタム矢印アイコン */
background-repeat: no-repeat;
background-position: right 8px center;
cursor: pointer;
}
appearance: noneでブラウザのデフォルトスタイルを削除し、CSSでカスタムデザインを適用することができます。
ドロップダウンリストのスタイリング限界
select要素の大きな制限として、ドロップダウンで展開されるリスト部分（option要素）はCSSでほとんどスタイリングできません。
フォントカラー・背景色・フォントサイズ程度は変更できますが、hover時のスタイル変更やアイコンの追加などは、多くのブラウザでは対応していません。
ドロップダウンリストのデザインを完全に制御したい場合は、カスタム実装またはJavaScriptライブラリの使用が必要です。
まとめ
本記事では、HTMLのselect要素・datalist要素による基本実装、JavaScriptとCSSを使ったカスタムコンボボックスの作り方、CSSによるスタイリング方法について解説しました。
シンプルな選択が必要な場合はHTML標準のselect要素が最適であり、テキスト入力とオートコンプリートが必要な場合はdatalist要素を活用し、完全なカスタムデザインや高度な機能が必要な場合はJavaScriptライブラリを活用するというアプローチが実践的です。
アクセシビリティを常に意識した実装を行うことで、すべてのユーザーにとって使いやすいコンボボックスが実現できるでしょう。
