【ITニュース解説】Customizable Select: The <select> dropdown FINALLY catches up with CSS

ウェブサイトやアプリケーションを開発するシステムエンジニアを目指す皆さんにとって、ユーザーインターフェース（UI）の使いやすさや見た目の美しさは非常に重要だ。その中でも、情報を選択する際に使われるドロップダウンメニュー、HTMLの<select>要素は、これまで多くの開発者を悩ませてきた要素の一つだった。今回のニュースは、この<select>要素のスタイリングに関する長年の課題がついに解決に向かっているという、非常に画期的な内容を含んでいる。

これまでの<select>要素は、簡単に使えるという利点があった一方で、見た目（スタイル）を自由にカスタマイズすることが非常に難しいという問題があった。ドロップダウンのポップアップ表示や内部の細かいデザインは、多くの部分がウェブブラウザではなく、皆さんが使っているパソコンやスマートフォンのオペレーティングシステム（OS）によって制御されていたためだ。CSSのappearance: noneというプロパティを使っても、ある程度のスタイルをリセットすることはできたが、完全にデザインをコントロールすることは不可能だった。

そのため、デザインカンプ（デザイナーが作成した完成イメージ図）に完璧にマッチする<select>要素を実装しようとすると、開発者はJavaScriptを使ってゼロからドロップダウンメニューのコンポーネントを再構築する必要があった。この再構築には、キーボードでの操作性、要素にフォーカスが当たったときの挙動、そして障害を持つユーザーでも利用できるようなアクセシビリティへの配慮など、本来<select>要素が持っている機能すべてを自分たちで実装し直すという、非常に手間のかかる作業が伴っていた。これは開発のコストを増大させる大きな要因となっていたのだ。

今回の新しい機能は、そのような長年の課題を解決するために登場した。既存のHTMLの<select>要素を拡張することで、スタイリングの自由度を大幅に向上させるものだ。開発者は、新しいCSSプロパティであるappearance: base-selectという値を指定することで、この新しい機能を「オプトイン」、つまり利用することを宣言できる。一度オプトインすれば、選択部分（ピッカー）、ドロップダウン内のオプション、表示される矢印、そして選択された項目を示すチェックマークといった、<select>要素の様々な部分をCSSを使って自由にスタイリングできるようになる。

この機能の素晴らしい点は、スタイリングの自由度が増す一方で、ネイティブのフォーム送信機能や、キーボードでの項目選択といった既存の<select>要素が持つ本来の動作はそのまま利用できることだ。さらに、<option>要素の中に画像やアイコン、色見本など、よりリッチなHTMLコンテンツを含めることも可能になるため、ユーザーインターフェースの表現力が格段に向上する。

現在のブラウザサポート状況は、2026年9月22日時点の情報によると、主要なモダンブラウザで実装が進んでいる。Google ChromeとMicrosoft Edgeはバージョン135以上で既に対応しており、Android版のChromeもサポート済みだ。Apple SafariもmacOS、iOS、iPadOS版のバージョン27.0（2026年9月17日リリース）でこの機能が利用できるようになった。一方で、Mozilla Firefoxはまだデフォルトでは有効になっておらず、実験的な実装段階にある。

まだすべてのブラウザで完全にサポートされているわけではないため、この機能は「Baseline」（ウェブ標準として広く利用可能で安定している状態）ではない。そのため、この機能をウェブサイトに導入する際には、「プログレッシブエンハンスメント」という考え方を用いることが重要だ。これは、新しい機能をサポートしていないブラウザでも、通常の<select>要素として問題なく機能し、基本的な選択操作ができるようにしておくということだ。例えば、ChromeやSafariでしか対応していない豪華なスタイルを適用しつつも、Firefoxなどの未対応ブラウザではシンプルなデフォルトの<select>が表示されるようにする。また、Safari 27ではベースとなるスタイルが以前と異なるため、スタイルを何も指定しない状態での<select>の見え方は、ブラウザによって異なる可能性があることにも注意が必要だ。

具体的な実装方法を見てみよう。 まず、<select>要素のHTMLコードは今まで通りで良い。例えば、<label for="mode">Reading mode</label><select id="mode" name="mode"><option value="standard">Standard</option>...</select>といった基本的な構造を用いる。

次に、CSSでappearance: base-selectを適用する。select, select::picker(select) { appearance: base-select; }という記述で、select要素そのものと、ドロップダウンのポップアップ部分（::picker(select)という擬似要素で指定）の両方をオプトインする。これにより、JavaScriptを使わずにスタイリングが可能になる準備が整う。

さらに、具体的なスタイルを適用する際は、@supports (appearance: base-select)というCSSルールを使って、この機能をサポートしているブラウザのみにスタイルを適用する。これにより、プログレッシブエンハンスメントを実現できる。例えば、select要素にはフォント、文字色、背景色、ボーダー、角丸を設定し、::picker(select)にはマージンやパディング、影を設定できる。

ドロップダウン内の各オプション（option要素）や、選択されているオプション（option:checked）、マウスカーソルが乗ったときやキーボードでフォーカスされたとき（option:hover, option:focus-visible）のスタイルも自由に設定できる。さらに、ドロップダウンの矢印はselect::picker-icon、選択された項目のチェックマークはoption::checkmarkという擬似要素を使って、色や形をカスタマイズできる。例えば、ドロップダウンが開いたときにはselect:open::picker-icon { rotate: 180deg; }のように矢印の向きを変えることも可能だ。ユーザーがキーボードで操作する際の視認性を高めるため、outlineプロパティを使ってフォーカス時のスタイルを適切に設定することも非常に重要だ。

この機能の真価は、<option>要素の中に単なるテキストだけでなく、よりリッチなコンテンツを含められる点にある。例えば、カラーピッカーのような機能を作る場合、<option>の中に色見本を表す小さな円（<span class="swatch">）と色の名前（<span>Violet</span>）を並べて表示することができる。選択されたオプションの内容を<select>要素の表示部分に反映させるためには、<select>要素の直下に<button type="button"><selectedcontent></selectedcontent></button>という構造を配置する。この<selectedcontent>という要素には、ブラウザが自動的に選択された<option>要素の内容を複製して表示してくれる。これにより、例えば色見本と色の名前が<select>の表示部分にも現れるようになるのだ。CSSでoption, selectedcontent { display: flex; align-items: center; gap: 10px; }のように記述することで、アイコンとテキストをきれいに配置できる。アクセシビリティのため、装飾的な画像やアイコンにはaria-hidden="true"を設定し、スクリーンリーダーなどの支援技術にはその要素を読み上げないように指示し、必ず読み上げ可能なテキスト情報を残すようにするべきだ。

この新しい機能をアプリに組み込む上で、いくつか注意すべき点がある。 まず、モバイルデバイスでの挙動が変わる可能性がある。appearance: base-selectを適用したドロップダウンピッカーは、OSが提供するネイティブのピッカーではなく、ブラウザの表示領域内で展開されるようになる。そのため、タッチデバイスでどのように動作するか、必ずテストを行う必要がある。 次に、ReactやVueなどのJavaScriptフレームワークを使っている場合、リッチな<select>のマークアップが、フレームワークのHTML解析（パーサー）やサーバーサイドレンダリング（SSR）のハイドレーション（サーバーで生成されたHTMLにクライアントサイドのJavaScriptイベントを付与する処理）の際に問題を引き起こす可能性がある。そのため、使用しているフレームワークや、スクリーンリーダーなどの支援技術との組み合わせで十分にテストを行うことが不可欠だ。HTMLのネイティブなセマンティクス（意味付け）は強力な基盤となるが、それだけでテストが不要になるわけではない。

この新しいCSS機能は、長らく制約が多かった<select>要素のスタイリングに革命をもたらすものだ。システムエンジニアを目指す皆さんにとって、これはより表現力豊かで、かつアクセシビリティにも配慮したユーザーインターフェースを効率的に構築できるようになる大きな一歩となるだろう。