CSSでselectをスタイリングできる新機能、実務投入はまだ早かった話

海外のWeb制作者向けアンケート調査「State of HTML 2025」(回答者6,223人)を見ていたら、毎年ほぼ同じ結果が出ている質問がありました。「HTMLで一番困っていることは?」という問いに対して、今回も「スタイリング・カスタマイズの自由度が足りない」がダントツの1位だったんです。年によって多少表現は変わるものの、この不満、何年も1位を譲っていません。

そして同じ調査の別の質問、「今年一番追加してほしいHTML機能」を見てみると、まさにその不満に直結する項目が堂々の1位に来ていました。Customizable Select、つまり<select>要素(あのプルダウンメニュー)を自由にスタイリングできる仕組みです。

select、地味に一番スタイリングできない要素だった

その通りでした。言われてみれば。ボタンもテキストフィールドもCSSでかなり自由に見た目を変えられるのに、<select>の中の選択肢一覧(ドロップダウン部分)だけは、ずっとOS標準の見た目のままでした。デザインに合わせたいなら、結局JavaScriptで一から自作のドロップダウンを組むしかない。この「selectだけ蚊帳の外」状態、うちの案件でも何度となく踏んできた壁です。

実際、これまで案件で凝ったデザインのプルダウンが必要になるたびに、素のselectを諦めて自作のリストUIを組む羽目になっていました。キーボード操作・スクリーンリーダー対応まで自前で作り込むのは地味に骨が折れる作業で、「本当はselectのまま済ませたいのに」と思いながら手を動かしていた記憶があります。

自分だけじゃなかった。安心しました。State of HTMLの結果を見て、あの地味な不便さがちゃんと数字に出ていることに気づいたからです。

ちょうどこの不満に応える機能が登場していた

調べてみると、まさにこの不満を解消するCSSの新機能が動き出していました。名前はappearance: base-selectという指定です。

select,
::picker(select) {
  appearance: base-select;
}

たったこれだけの指定で、<select>本体とドロップダウンの選択肢一覧(::picker(select)という新しい疑似要素で表す)の両方が通常のCSSでスタイリングできる状態に切り替わり、背景色・角丸・ホバー時の見た目はもちろん、選択肢の中にアイコン画像を並べるようなリッチな表示までJavaScriptライブラリなしで組めるようになります。夢のような仕組みです。

ただし、実案件に入れるにはもう少し先

良い話はここまで。ブラウザ対応を見るとやっぱり温度差があり、安定版でこの機能が使えるのは今のところChrome・Edgeの135以降だけで、Safariはまだ「Technology Preview」という開発者向けのお試し版の中でしか動かず正式版には来ておらず、Firefoxに至ってはNightly(実験版)の中で設定フラグを有効にしないと試せない段階でした。

またこの構図です。前回の記事で扱ったAnchor Positioningとよく似ています。調査で「一番欲しい」と支持されるほどの機能なのに、実際に本番投入できるのはまだ一部のブラウザだけ。日本の案件だとSafariの表示確認を省略できないことが多いので、今すぐこれだけに乗り換える、という判断にはなりません。

今できることは、progressive enhancementで様子見

とはいえ、完全に無視するのももったいない機能です。appearance: base-selectは対応していないブラウザでは単に無視され、今まで通りの標準のselectとして表示される設計になっています。なので、対応ブラウザのユーザーにだけ見た目がリッチになる、という前提で先行導入しておく分には実害がありません。

実装するなら、前回のAnchor Positioningの回で書いたのと同じ考え方で、@supportsを使った段階導入が現実的です。

@supports (appearance: base-select) {
  /* 対応ブラウザ向けのカスタムスタイル */
}

Safari・Firefoxのユーザーには今まで通りの標準selectを見せつつ、対応ブラウザのユーザーにだけ新しい見た目を出す。全員に同じ体験を無理に揃えようとせず、対応状況に応じて出し分ける、という発想そのものが、今回のような「まだ道半ばの新機能」との付き合い方の基本形なんだと思います。

CSSの新機能を追いかけていると、こういう「調査データ上の不満」と「その解決策の技術的な実装」が、時期を置かずにセットで見えてくることがあります。今回はその流れを一つ拾えた回でした。続きはまた今度。Safari・Firefoxの対応状況は、機会を見て追いかけたいと思います。

この記事を書いた人

Cat's Hand

Web制作歴10年近く。WordPressのテーマカスタマイズやコーディングを中心に、副業・本業ともにweb制作に携わっています。このブログでは、実際に手を動かして分かったことを書いています。

Cat's Handをフォローする