カスタマイズ可能なselect：ついに本物の<select>にスタイルを

標準のselect要素を超えようとすると、これまでは2つの悪い選択肢のどちらかを迫られてきました。重量級のJavaScriptライブラリを使うか、大量のdiv要素を並べるかです。そしてどちらの場合もアクセシビリティの実装が厄介になりがちでした。¹ WWDC 2026でSafariチームが示したのは、その袋小路からの出口です。カスタマイズ可能なselectとは、HTMLとCSSへの一連の追加機能であり、既存の<select>要素を完全にスタイル可能にしながら、それがすでに備えているセマンティクス、キーボードナビゲーション、スクリーンリーダー対応を維持します。Safari 27とChrome 135からは、ボタン、ドロップダウンメニュー、チェックマーク、さらには矢印までスタイルを変更でき、option内に画像や動画、絵文字を入れられるようになります。¹

TL;DR

• カスタマイズ可能なselectは、HTMLとCSSだけで本物の<select>要素にスタイルを適用し、これまで開発者が頼ってきたJavaScriptライブラリやdivの積み重ねを置き換えます。提供はSafari 27とChrome 135から始まります。¹
• オプトインの方法はappearance: base-selectで、2か所に適用します。まずselect自体に適用してボタンのスタイリングを開放し、次に::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の山に乗り換え、アクセシビリティを手作業で作り直すことを意味していました。カスタマイズ可能な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);
}

まっさらな状態を整えたうえで、デモではpaddingとmarginで間隔を調整し、続いてドロップダウンにボーダーと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がグリッドセル間の間隔を定義することで、ドロップダウンは整然としたカテゴリーのグリッドにぴたりと収まります。¹ セッションは同じテーマで締めくくりの見せ場を用意しています。カスタマイズ可能なselectだけで作られた、放射状のカラーピッカーです。¹

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

カテゴリーブラウザには1つだけギャップが残っています。SVGシンボルはoptionの中にありますが、現在の選択を表示するボタンはテキストしか表示しません。¹ カスタマイズ可能な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のように、です。こうしてボタンはついに、それが開くメニューと同じビジュアル言語を示すようになります。¹²

プログレッシブエンハンスメントが最初から組み込まれている

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

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

重要ポイント

フロントエンド開発者向け： - ボタンには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属性を空のままにしましょう。¹ - 出荷前に、サポートしていないブラウザと支援ツールでテストしましょう。これはセッション自身のチェックリストにある通りです。¹

展開を計画する技術リーダー向け： - カスタマイズ可能なselectはプログレッシブエンハンスメントとして扱いましょう。Safari 27とChrome 135はカスタムデザインを得て、それ以外は皆ネイティブのポップアップを得ます。JavaScriptのフォールバックは不要です。¹ - Safari Technology PreviewまたはSafari Betaで今すぐ評価し、現在バンドルに居座っているドロップダウンライブラリと天秤にかけてみましょう。¹

FAQ

カスタマイズ可能なselectとは何ですか？

カスタマイズ可能なselectとは、WWDC 2026でSafariチームが発表し、Safari 27とChrome 135から提供される、HTMLとCSSの一連の機能であり、既存の<select>要素を完全にカスタマイズ可能にするものです。ボタン、ドロップダウンメニュー、矢印、チェックマークをCSSでスタイリングし、optionの中にリッチコンテンツを入れながら、要素の組み込みアクセシビリティを維持できます。¹

カスタマイズ可能なselectにはどうやってオプトインしますか？

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

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

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

selectedcontent要素とは何ですか？

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

カスタマイズ可能なselectをサポートしていないブラウザではどうなりますか？

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

カスタマイズ可能なselectは、CSS Grid Lanesがmasonryレイアウトに対して行うのと同じように、依存関係を1つ削除します。そしてこの組み合わせは意図的なものです。セッション315自体が、視聴者をGrid Lanesのセッションへ案内して締めくくられており、デモサイトは両方の機能を併用しています。¹ AppleはプレーンなHTML要素にできることを拡張し続けており、これはAppleプラットフォームにおけるHTML model要素で扱ったのと同じ軌跡です。そして、あなたがもう出荷しなくて済むドロップダウンライブラリの一つひとつが、ノービルド宣言の主張を強めます。シリーズ全体のハブはApple Ecosystem Seriesです。

References