Customizable Select Generatorとは
カスタマイズ可能なselect要素はネイティブのHTML select要素をJavaScriptで構築されたdiv構造に置き換えることなくスタイル設定できる新しいCSS機能です。appearance: base-selectを使用することでピッカーアイコン、オプションチェックマーク、ドロップダウンポップオーバーをスタイル設定しながら実際のselect要素の組み込みアクセシビリティとフォーム動作をすべて維持できます。JavaScriptのドロップダウンライブラリは不要です。
クイックアンサー
appearance: base-select（Chrome 135以上）を使用してネイティブのselect要素をスタイル設定します。ドロップダウン矢印には::picker-icon、選択インジケーターにはoption::checkmark、ポップオーバースタイルには::picker(select)を使用します。ネイティブのフォームセマンティクスとキーボードアクセシビリティは維持されます。フォールバックは標準の読み取り可能なselectです。
Last updated: 2026-05-28
制限事項
- カスタマイズ可能なselectは非常に新しい機能（Chrome 135以上）でまだCSS Baselineに含まれていません。FirefoxとSafariはまだサポートしていません。@supportsでテストし読み取り可能なネイティブフォールバックを提供してください。
- selectのすべての側面がカスタマイズ可能なわけではありません。オプションリストのレイアウト、スクロール動作、モバイルピッカーUIはブラウザによって制御されます。これは設計上の意図でありすべてのデバイスでselectの使用性を維持します。
- ::picker-iconとoption::checkmarkの疑似要素はカスタマイズ可能なselectモデルの一部であり他の要素では使用できません。appearance: base-selectのselect内でのみ機能します。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- selectオプションを値|ラベルのペアで1行につき1つ入力します。
- ピッカーアイコンのスタイル（シェブロン、カスタムSVG、なし）とチェックマークのスタイル（チェック、ドット、なし）を選択します。
- オプションで閉じた状態のスタイルとブラウザフォールバックの注意事項を含めます。
- 生成されたHTMLとCSSをコピーします。selectはすべてのブラウザでネイティブフォーム要素として機能します。
主な用途
- カスタムselectライブラリなしでブランドのデザインシステムに合わせた国セレクタードロップダウンをスタイル設定します。
- ネイティブのフォームセマンティクスとキーボードアクセシビリティを維持するスタイル設定済みの言語切り替えを作成します。
- フォームとスクリーンリーダーで機能するカスタムチェックマークアイコン付きのテーマセレクターを構築します。