Customizable Select: ついに本物の<select>をスタイルできる

デフォルトのselect要素を超えようとすると、これまでは2つの好ましくないトレードオフのどちらかを選ぶしかありませんでした。重いJavaScriptライブラリか、大量のdiv要素か。そしてどちらを選んでもアクセシビリティが厄介になります。¹ WWDC 2026でSafariチームが示したのが、その出口でした。customizable select、つまり既存の<select>要素を完全にスタイル可能にしつつ、すでに備わっているセマンティクス、キーボードナビゲーション、スクリーンリーダー対応をそのまま保つHTMLとCSSの追加機能群です。Safari 27とChrome 135から、ボタン、ドロップダウンメニュー、チェックマーク、さらには矢印までスタイルし直し、option内に画像や動画、絵文字を入れられるようになります。¹

TL;DR

• customizable selectは、HTMLとCSSだけで本物の<select>要素をスタイルし、これまで開発者が頼ってきたJavaScriptライブラリやdivの積み重ねを置き換えます。Safari 27とChrome 135から利用できます。¹
• オプトインはappearance: base-selectで、2回適用します。1回はselect自体に適用してボタンのスタイリングを開放し、もう1回は::picker(select)に適用してネイティブのドロップダウンメニューをオプトアウトします。¹
• 新しくスタイル可能なパーツも同時に登場します。::picker-iconはcontentプロパティとwidthで矢印を変更し、option要素の::checkmarkは同じ要領でチェックを差し替え、:open疑似クラスはメニューが開いている間のボタンをスタイルします。¹
• optionはあらゆる種類のコンテンツを受け入れます。画像、動画、絵文字など。セッションのデモでは、各optionの中にSVGとラベルを入れ、ドロップダウン全体をgrid-templateとgapでCSSグリッドとしてレイアウトしています。¹
• これまでHTMLで許可されていなかった、<select>の最初の子としての<button>の配置が、組み込みのボタンを置き換えます。その中の<selectedcontent>要素が、選択されたoptionのリッチなコンテンツを表示します。²
• プログレッシブエンハンスメントは無料で付いてきます。サポートしていないブラウザはネイティブのポップアップにフォールバックし、セマンティックなselect要素はどこでも組み込みのアクセシビリティを保ちます。¹

divスープからセマンティックHTMLへ

Safariエンジニアのティムが、2:48から写真家のポートフォリオデモにappearance: base-selectを適用しています。

セッションの切り口は、<select>がすでに得意としていることから始まります。この要素は基本的なアクセシビリティを最初から提供します。option要素間のキーボードナビゲーションと堅実なスクリーンリーダーの挙動が、外部ライブラリなしで手に入るのです。¹ Appleプラットフォームでのネイティブなレンダリングはおなじみのプルダウンボタンであり、プラットフォーム上の他のすべてのコントロールと一致するため、ユーザーは慣れ親しんだ方法で操作できます。¹

ただし問題は常にデザインでした。スタイルの施されたサイトにネイティブのコントロールを置くと、浮いてしまいます。どうしてもなじまないのです。これまでその解決策は、要素を完全に捨ててJavaScriptウィジェットやdivの山に置き換え、アクセシビリティを手作業で作り直すことを意味しました。customizable selectは要素をそのまま保ち、スタイリングをあなたの手に委ねます。セッションが実際の写真家ポートフォリオの構築を通じて辿る、3つの段階で。すなわちボタン、ドロップダウンメニュー、そして最後にプレーンテキストを超えるコンテンツです。¹

ボタンをスタイルする: base-select、::picker-icon、:open

ボタンは、メニューを表示するためにクリックするselectの部分です。最初のステップはたった1つの宣言です。

select {
  appearance: base-select;
}

appearance: base-selectは、ネイティブのレンダリングを、変更可能な小さなベーススタイルのセットに切り替えます。¹ その効果は継承を通じて即座に現れます。デモサイトはbodyにfont-family: Gill Sansを設定しており、selectボタンは今やbodyのフォントを継承し、隣のラベルと一致します。¹ そこから先は、背景、ボーダー、パディングを他の要素と同じように調整できます。

2つの新しいフックがボタンを仕上げます。矢印は専用のセレクタ::picker-iconを持ち、置き換えるグリフのためのcontentプロパティと、サイズを決めるwidthを取ります。:open疑似クラスは、ドロップダウンメニューが開いている間のボタンを別のスタイルにします。

select::picker-icon {
  content: "▼"; /* swap in your own glyph */
  width: 1rem;
}

select:open {
  background: #1d1d1f;
  color: #f5f5f7;
}

select:open::picker-icon {
  color: #f5f5f7; /* arrow matches the text color in the open state */
}

結果に対するセッションの結論はこうです。わずか数行のCSSで、サイトの他の部分と一致するselectが手に入る。

ドロップダウンをスタイルする: ::picker(select)と::checkmark

メニューには、それ自身のスタイル可能なパーツが備わっています。ドロップダウン本体はselect要素の::picker(select)で指定し、チェックはoption要素の::checkmarkで指定します。¹ ネイティブのメニューをオプトアウトするには、appearance: base-selectをもう一度、今度はpickerに適用する必要があります。

select::picker(select) {
  appearance: base-select;
  padding: 0.5rem;
  margin-top: 0.25rem;
  border: 1px solid #d2d2d7;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}

まっさらな状態が整ったところで、デモはパディングとマージンで間隔を整え、続いてドロップダウンにボーダーとbox-shadowを施します。¹ 現在の選択を強調するには、何か新しいものではなく既存の:checkedセレクタを使います。チェックされたoptionを太字にし、他をグレーアウトします。¹

option:checked {
  font-weight: bold;
}

option:not(:checked) {
  color: #6e6e73;
}

option::checkmark {
  content: "✓";
  width: 1rem;
}

::checkmarkは::picker-iconとまったく同じように動作します。contentとwidthを設定すれば、デフォルトのチェックがデザインに合うどんなグリフにでも変わります。¹

optionの中のリッチコンテンツをグリッドとしてレイアウトする

より大きな変化は、<option>の中身です。セッションは明言します。画像でも動画でも絵文字でも、好きなものは何でも、あらゆる種類のコンテンツが使える、と。¹ デモは、写真家の最も人気のある被写体のためのカテゴリブラウザを構築し、各optionの中にSVGシンボルとラベルを入れています。

<select>
  <option value="flowers">
    <img src="flowers.svg" alt="">
    Flowers
  </option>
  <!-- more categories -->
</select>

空のaltに注目してください。ティムは画像のalt属性をわざと空のままにしています。そうしないと「Flowers」というラベルがスクリーンリーダーで2回読み上げられてしまうからです。¹ 小さなディテールですが、現実的な意味があります。リッチなoptionも、プレーンなものと同じくらい支援技術で使いやすいままなのです。

デフォルトのチェックマークを取り除いた状態で、デモはcheckedセレクタと色の変更によって選択されたoptionをハイライトします。¹ 1つ問題が残ります。シンボルとラベルのoptionはドロップダウンを非常に長くしてしまうのです。その解決策は、すでに存在するCSSを再利用します。今やpickerはごく普通のスタイリング対象だからです。グリッドレイアウトがメニュー全体を組み直します。

select::picker(select) {
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr 1fr; /* rows / columns */
  gap: 0.5rem;
}

grid-templateが行と列の数を定義し、gapがグリッドセル間の間隔を定義すると、ドロップダウンは整理されたカテゴリのグリッドにぴたりと収まります。¹ セッションは同じテーマの締めくくりとして、customizable selectだけで構築された放射状のカラーピッカーを披露して終わります。¹

差し替え可能なボタンとselectedcontent

カテゴリブラウザには1つギャップが残っています。SVGシンボルはoptionの中にありますが、現在の選択を表示するボタンはテキストしか表示しないのです。¹ customizable selectは、組み込みのボタンを置き換えられるようにすることでこのギャップを埋めます。<button>要素を<select>の最初の子として配置するのです。selectの中にボタンを入れることはこれまでHTMLで許可されていませんでしたが、今ではカスタムコンテンツを受け入れます。ラベルのようなものや、まさにこの仕事のために作られた要素を。¹

WebKitのSafari 27ベータの発表が、その要素の名前を挙げています。<selectedcontent>です。selectの最初の子であるボタンの中に置かれると、現在選択されているoptionのコンテンツを表示し、直接スタイルできます。²

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="everything">
    <img src="everything.svg" alt="">
    Everything
  </option>
  <!-- more categories -->
</select>

この要素は、選択されたoptionに属するリッチコンテンツを、何であれそのまま映し出します。デモの「Everything」ラベルの隣のSVGのように。こうしてボタンは、それが開くメニューと同じビジュアル言語をついに表示するようになります。¹²

プログレッシブエンハンスメントは組み込み済み

セッションの最後のステップは、チームが見過ごすと痛い目を見るものです。customizable selectをサポートしていないブラウザでデザインを確認すること。その答えは、最良の意味で退屈です。プログレッシブエンハンスメントが働き、コントロールは使えるままで、お客様にはネイティブのポップアップが提供されます。¹ select要素を再利用するということは、フォールバックのストーリーがすでに存在するということです。そして<select>はセマンティックな要素なので、組み込みのアクセシビリティ機能はあらゆるブラウザで生き残ります。¹

利用可能時期は具体的です。Safari 27とChrome 135。今すぐ機能を試すには、Safari Technology PreviewまたはSafari Betaをダウンロードしてください。¹ セッションの締めくくりのガイダンスは実践的です。webkit.orgでデモを確認し、自分のサイトでシンプルなものをスタイルしてみて、サポートしていないブラウザと支援ツールでテストし、インターフェースが誰にとっても機能するようWebKitのベストプラクティス資料を読むこと。¹

Safariチームがラボで追加したこと

WWDCのラボで明らかになったいくつかのことが、特にcustomizable selectが向かう先について、全体像を補ってくれます。

注目すべきロードマップ項目はappearance: baseです。同じオプトインを、<select>だけでなくすべてのフォームコントロールへ一般化したものです。この値はCSS仕様に存在しますが、まだどこにも出荷されていません。³ ラボでパネルは、これは「今は出荷しない」もので後から来ると述べ、仕様の議論はまだ公然と決着がついておらず、パネリストたちはスタイルされていないベースがそもそもどう見えるべきかについて、その場で意見が割れていました。⁴ 明言されたデザイン目標は十分に明快です。ページのスタイルから最大限に継承すること、レイアウトの魔法を使わないこと、そしてエンジンをまたいで同一のベースレンダリングと同一のDOM構造を保つこと。⁴

なぜcustomizable selectがそもそも<select>を再利用するのか、その歴史が理由を説明してくれます。当初の提案は、まったく新しい<selectmenu>要素でした。WebKitの標準化エンジニアが代わりに<select>を再利用することを推し進めたため、サポートしていないブラウザはネイティブのフォールバックを無料で保てます。これがまさに上述のプログレッシブエンハンスメントのストーリーなのです。⁴

パネルから1つの厳格なルールが出てきました。optionには常にテキストコンテンツを保つこと。アイコンのみのoptionは、サポートしていないブラウザで空白のネイティブポップアップをレンダリングし、サポートしていないエンジンのユーザーを立ち往生させてしまいます。⁴

重要なポイント

フロントエンド開発者向け: - ボタンにはselect要素にappearance: base-selectを、ドロップダウンには再度::picker(select)にオプトインします。それから背景、ボーダー、パディング、間隔、box-shadowを他の要素と同じようにスタイルします。¹ - 矢印は::picker-iconで、チェックは::checkmarkで差し替えます。どちらもcontentにwidthを加える形です。開いた状態は:openでスタイルし、選択の強調には既存の:checkedセレクタを使います。¹ - <option>の中に本物のHTML（画像、動画、絵文字）を入れ、grid-templateにgapを加えたグリッドのような既存のCSSでメニューを組み直します。組み込みのボタンは、<selectedcontent>を抱えた最初の子の<button>で置き換えます。¹²

アクセシビリティを重視するチーム向け: - セマンティックなselectは、サポートの有無にかかわらず、外部ライブラリなしでキーボードナビゲーションとスクリーンリーダー対応を保ちます。¹ - optionが画像とテキストラベルの両方を持つ場合は、スクリーンリーダーがラベルを2回読み上げないよう、画像のalt属性を空のままにします。¹ - 出荷前に、セッション自身のチェックリストに従って、サポートしていないブラウザと支援ツールでテストします。¹

ロールアウトを計画する技術リーダー向け: - customizable selectをプログレッシブエンハンスメントとして扱います。Safari 27とChrome 135はカスタムデザインを得て、それ以外はネイティブのポップアップを得ます。JavaScriptのフォールバックは不要です。¹ - 今すぐSafari Technology PreviewまたはSafari Betaで評価し、現在バンドルに入っているドロップダウンライブラリと比べて検討します。¹

FAQ

customizable selectとは何ですか？

customizable selectは、WWDC 2026でSafariチームが導入し、Safari 27とChrome 135から始まる、既存の<select>要素を完全にカスタマイズ可能にするHTMLとCSSの機能群です。ボタン、ドロップダウンメニュー、矢印、チェックマークをCSSでスタイルし、optionの中にリッチコンテンツを入れつつ、要素の組み込みのアクセシビリティを保ちます。¹

customizable selectにはどうやってオプトインしますか？

appearance: base-selectを2か所に適用します。1つはselect要素自体で、ネイティブのボタンレンダリングをより小さなベーススタイルのセットに置き換えます。もう1つは::picker(select)で、ドロップダウンメニューをネイティブのレンダリングからオプトアウトさせ、自由にスタイルできるようにします。¹

option要素の中に画像や他のHTMLを入れられますか？

はい。セッションは、optionの中にあらゆる種類のコンテンツ、画像、動画、絵文字を入れられると述べています。デモはoptionごとにSVGとテキストラベルを使い、スクリーンリーダーがラベルを一度だけ読み上げるよう画像のaltを空にし、grid-templateとgapを使ってメニューをCSSグリッドとしてレイアウトしています。¹

selectedcontent要素とは何ですか？

<selectedcontent>は、現在選択されているoptionのリッチコンテンツをselectのボタンの中に表示する要素です。customizable selectは、これまでHTMLで許可されていなかった<select>の最初の子としての<button>を許可します。そのボタンの中に<selectedcontent>を置くと、選択されたoptionのコンテンツ、たとえばラベルの隣のSVGなどを映し出し、要素を直接スタイルできます。¹²

customizable selectをサポートしていないブラウザでは何が起こりますか？

コントロールは優雅に劣化します。プログレッシブエンハンスメントにより、selectは完全に使えるままで、お客様にはネイティブのポップアップが提供されます。そして<select>はセマンティックな要素なので、組み込みのアクセシビリティ機能は残ります。セッションは、出荷前にサポートしていないブラウザと支援ツールでテストすることを推奨しています。¹

customizable selectは、CSS Grid Lanesがmasonryレイアウトに対して行うのと同じように、依存関係を1つ削除します。この組み合わせは意図的なものです。session 315自体が、視聴者をGrid Lanesのセッションへ案内して締めくくり、デモサイトは両方の機能を一緒に使っています。¹ AppleはプレーンなHTML要素にできることを拡張し続けています。Appleプラットフォーム上のHTML model要素で扱った軌道と同じです。そして、もう出荷しなくて済むようになったドロップダウンライブラリの1つ1つが、no-buildマニフェストの論拠を強めます。シリーズ全体のハブはApple Ecosystem Seriesです。

参考文献