Customizable SelectがSafari 27に到達──JSなしでselectを自由にデザインする

フォームのセレクトボックスを「サイトのデザインに合わせたい」。そう思って`appearance: none`で矢印を消し、`div`と`button`で自作セレクトを組み立てた経験は、フロントエンドなら一度はあるはずです。見た目は整っても、キーボード操作、スクリーンリーダー、フォーム送信、バリデーションを自前で再実装することになり、定番の事故が起きます。

Safari 27.0が`appearance: base-select`に対応し、Chrome 135以降に続きました。これで主要2エンジンで、ネイティブの`<select>`のまま見た目を自由に変えることができます。この記事では、Customizable Selectの最小実装、どこまで装飾できるか、Firefoxへのフォールバック、実務での使いどころを整理します。

30秒でわかる結論

Safari 27.0がCustomizable Selectに対応。Chrome 135以降でも利用可能。
`appearance: base-select`で、ネイティブのキーボード操作・読み上げ・フォーム連動を維持したまま装飾できる。
`<selectedcontent>`、`::picker(select)`、`::checkmark`で、選択中表示・ドロップダウン・チェックマークを制御できる。
Firefoxは未対応。`@supports`で段階導入し、非対応ブラウザは従来のselectにフォールバックする。
新規案件のChrome/Safari優先部分から試す。決済など critical なフォームは慎重に。

何が起きたのか：Safari 27の対応

Safari 27.0は、`<select>`と`::picker(select)`に`appearance: base-select`を指定すると、ブラウザ既定の装飾と新しいHTML機能が有効になる仕組みを搭載しました。Chromeは135以降で同等の機能を実装しており、Safariが追いついたことで2エンジン対応になりました。

FirefoxはHTMLパーサーの更新（Firefox 153）で下地を整えていますが、Customizable Select自体はまだデフォルトで使えません。MDNも「Limited availability」としているため、現時点ではプログレッシブエンハンスメント前提の機能です。

何が変わるのか：div自作からの解放

これまでの自作セレクトは、見た目を自由にする代わりに、ネイティブが無料でやっていた仕事を全部引き受けていました。フォーカス移動、Enter/Spaceでの開閉、上下キーでの選択、Escでのキャンセル、フォーム送信、IME、スクリーンリーダーへの通知。`div`と`li`で組むと、これらの再実装が必要です。

項目	div自作	Customizable Select
キーボード操作	自前で実装	ネイティブのまま
スクリーンリーダー	ARIAを自前で管理	ネイティブのセマンティクス
フォーム送信	hidden input等で連携	`name`/`value`がそのまま動く
見た目	完全に自由	かなり自由。一部制約あり

Customizable Selectは「見た目の自由度を上げるために、アクセシビリティの土台を捨てる」取引を不要にします。ここが最大の価値です。

最小実装：HTMLとCSS

まずは選択中の表示を差し替える`<selectedcontent>`と、ドロップダウン全体を指す`::picker(select)`だけ覚えれば動きます。

HTML

<label for="plan">プランを選択</label>
<select id="plan" class="plan-select">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="personal">個人プラン</option>
  <option value="team">チームプラン</option>
  <option value="corp">法人プラン</option>
</select>

CSS

@supports (appearance: base-select) {
  .plan-select,
  .plan-select::picker(select) {
    appearance: base-select;
  }

  .plan-select {
    font: inherit;
    border: 1px solid #3b5ba9;
    border-radius: 8px;
    padding: 8px 12px;
    background: #fff;
    color: #17202b;
  }

  .plan-select::picker(select) {
    border: 1px solid #3b5ba9;
    border-radius: 8px;
    padding: 4px;
    margin-top: 4px;
  }

  .plan-select option {
    padding: 8px 12px;
    border-radius: 6px;
  }

  .plan-select option:checked {
    background: #e4eaf4;
    font-weight: 700;
  }
}

`<button>`の中の`<selectedcontent>`は、選択中の`<option>`の中身を自動で映します。アイコン付きの選択肢にすれば、閉じているときの表示にも同じアイコンが出ます。ドロップダウンは`::picker(select)`で枠・余白・位置を整え、各`option`は通常のCSSで装飾できます。

どこまで装飾できるか

選択中表示：`<selectedcontent>`で、選択肢の中身をそのままクローン表示。
ドロップダウン：`::picker(select)`で、枠、背景、余白、角丸、アニメーションを制御。
矢印：`::picker-icon`で色・回転・遷移を指定。
チェックマーク：`::checkmark`で位置や内容を変更。
リッチな選択肢：`<option>`内に画像、アイコン、説明文などのHTMLを入れられる。
位置決め：ピッカーはPopoverとしてトップレイヤーに出て、アンカー配置で位置を調整できる。

たとえば、言語 switcher で「国旗＋言語名＋補足」を選択肢に入れ、閉じているときは言語名だけ表示する、といった使い方ができます。

フォールバック：`@supports`で段階導入

Firefoxなど非対応ブラウザでは、`appearance: base-select`が無視され、`::picker(select)`や`<selectedcontent>`の指定も効きません。基本の見た目を従来のselectにしておき、対応ブラウザだけ上書きするのが安全です。

CSS

/* 基本: どのブラウザでも壊れない */
.plan-select {
  font: inherit;
  border: 1px solid #3b5ba9;
  border-radius: 8px;
  padding: 8px 12px;
  background: #fff;
  color: #17202b;
}

/* 対応ブラウザだけ装飾モード */
@supports (appearance: base-select) {
  .plan-select {
    appearance: base-select;
  }
  .plan-select::picker(select) {
    border: 1px solid #3b5ba9;
    border-radius: 8px;
    padding: 4px;
  }
}

非対応ブラウザでの見え方は、`@supports`の中身をコメントアウトすると再現できます。リリース前は「装飾版の見た目」より「素朴版で送信・選択が詰まらないこと」を先に確認すると事故が減ります。

実務での使い方

向いているのは、見た目が重要なフォームです。言語 switcher、料金プラン選択、並び替え、フィルタ、管理画面のセレクトなど、デザインシステムに合わせたい場面で効果があります。

一方で、決済、本人確認、住所入力など、あらゆるブラウザで確実に動く必要があるフォームは慎重にしてください。特にSSRを使っている場合、MDNは一部フレームワークでハイドレーション問題が起きる可能性を警告しています。まずは影響の小さい問い合わせフォームや設定画面から導入します。

Firefoxはいつ使える？→ 執筆時点ではデフォルト無効です。HTMLパーサーの準備は進んでいるので、今後実装される可能性はありますが、公開サイトでは`@supports`フォールバックを前提にしてください。

注意点：アクセシビリティとSSR

`<option>`内のリッチなHTMLは、読み上げられる内容を確認する。アイコンには`aria-hidden="true"`を付ける。
`<selectedcontent>`の中身が選択値として読み上げられるか、実機のスクリーンリーダーで確認する。
SSR時にハイドレーションエラーが出るフレームワークがある。MDNの警告を確認する。
Firefoxでは従来のselectにフォールバックする。見た目の差は許容する。
モバイルのネイティブピッカーとの違いを実機で確認する。

選択肢に画像や説明文を入れると、閉じているときの表示が長くなりがちです。`<selectedcontent>`側だけ補足を非表示にするCSSを用意し、一覧ではリッチ、選択中は簡潔にすると収まりが良くなります。

対応状況と使う判断

ブラウザ	対応	備考
Chrome / Edge 135以降	対応	`selectedcontent`、`::picker(select)`ともに利用可
Safari 27以降	対応	Safari 27.0で追加
Firefox	未対応	従来のselectにフォールバック

自分なら使うか：条件付きで使う。 Chrome/Safariが主対象の新規案件で、影響の小さいフォームから試します。Firefox利用者が多いサービスや、決済・認証のような critical な導線では、従来のselectを維持します。`@supports`で囲み、必ずネイティブfallbackを残すのが条件です。