自作のドロップダウンをやめる判断。カスタマイズ可能な select（base-select）の使いどころと、壊れない書き方

2026年11月時点の対応状況

変わりやすいところなので、この節にまとめます（2026年11月13日時点）。

Safari 27.2 の主な変更は3つです。<selectedcontent> を使わずに、選ばれている option の文字を整えられる ::field-content が加わったこと、<selectedcontent> がなくても開閉の印（picker icon）がいつも出るようになったこと、大きな選択肢の一覧が画面からはみ出さないよう safe の配置が使われるようになったことです。

ブラウザの既定の見た目（UA スタイル）は、WebKit が CSS の作業部会（CSS WG）に提示し、さらに議論して磨いている途中だと WebKit の記事にあります。既定の見た目に頼らず、必要なところは自分で指定しておくほうが、あとで見た目が変わったときに慌てずに済みます。

まず判断する。本物の select で足りるか

カスタマイズ可能な select は、<select> そのものの見た目を作り込める仕組みです。選んだ値はふつうの select と同じようにフォームで送られ、キーボード操作やスクリーンリーダーへの対応はブラウザが持ちます。その代わり、できることは「一覧から1つ選ぶ」の範囲です。

本物の select に向く場面

• 1つを選ぶ一覧で、アイコン、色の見本、短い説明文などを並べたい（プラン、配送方法、国や言語の切り替えなど）
• フォームの値として送りたい
• 対応していないブラウザでは、ふつうの select でかまわない

作り込まない、または別の部品を選ぶ場面

• 入力しながら候補を絞る（検索つきのコンボボックス）。select には文字の入力欄がありません
• 選択肢の中にリンクやボタン、チェックボックスを置きたい（後の節で書くとおり、option の中には置けません）
• スマートフォンで OS の選択の画面（ホイールやシート）を出したい。appearance: base-select にすると、モバイルの OS の部品は出なくなると Chrome の記事にあります。この場合は、作り込まないふつうの select のままにします
• 複数選択。この記事では1つを選ぶドロップダウンだけを扱います。multiple や size を付けたときの対応はブラウザごとに違うので、使う前にそれぞれ確かめてください

デザイナーとは、作り込む前に「未対応のブラウザではふつうの select に見える」ことを合意しておくのがおすすめです。ここで合意できないなら、本物の select ではなく、自作かライブラリを選ぶことになります。

最小の書き方。select と ::picker(select) の両方を切り替える

作り込みを始めるには、select 本体と、開いたときの一覧（::picker(select)）の両方に appearance: base-select を指定します。MDN には、一覧だけを切り替えることはできない、とあります。

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

閉じているときの表示を差し替えたいときは、select の最初の子に <button> を置きます。その中の <selectedcontent> には、選ばれている option の中身の複製が入ります。

<label for="plan">プラン</label>
<select id="plan" name="plan" class="plan-select">
  <button><selectedcontent></selectedcontent></button>
  <option value="lite">
    <img class="icon" src="lite.svg" alt="">
    <span>ライト</span>
    <span class="note">月10件まで</span>
  </option>
  <option value="pro" selected>
    <img class="icon" src="pro.svg" alt="">
    <span>プロ</span>
    <span class="note">月100件まで</span>
  </option>
  <option value="team">
    <img class="icon" src="team.svg" alt="">
    <span>チーム</span>
    <span class="note">月500件まで</span>
  </option>
</select>

開いたときの一覧はポップオーバーで、最上位のレイヤー（top layer）に出て、CSS のアンカー配置で select に結び付けられます。そのため、親に overflow: hidden があっても一覧は切れにくく、手元の確認（後の節）でも切れませんでした。自作のドロップダウンでよく出会う「カードの中で一覧が切れる」問題が起きにくい作りです。

壊れない書き方。@supports で囲み、テキストを土台にする

WebKit は「option には必ずテキスト（または代替テキスト）を入れる」ことをカスタマイズ可能な select の黄金律とし、作り込みは @supports (appearance: base-select) で囲んで、ふつうの文字を土台にするよう勧めています。MDN にも、対応していないブラウザではふつうの select に戻る、とあります。

/* 1. 未対応のブラウザでも読める、ふつうの select */
.plan-select {
  font: inherit;
  padding: 0.5rem 0.75rem;
}

/* 2. 対応しているブラウザだけ作り込む */
@supports (appearance: base-select) {
  .plan-select,
  .plan-select::picker(select) {
    appearance: base-select;
  }
  .plan-select {
    border: 1px solid #5c5c61;
    border-radius: 8px;
    background: #fff;
  }
  .plan-select::picker(select) {
    border: 1px solid #5c5c61;
    border-radius: 8px;
    padding: 4px;
  }
  .plan-select option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
  }
  .plan-select option:checked {
    background: #f4f4f5;
  }
  .plan-select .icon {
    inline-size: 20px;
    block-size: 20px;
  }
  /* 閉じているときは説明文を出さない */
  .plan-select selectedcontent .note {
    display: none;
  }
}

書くときに気をつけたいのは次の3つです。

• option には必ずテキストを入れる。 未対応のブラウザでは、option の中の画像や飾りは出ず、文字だけが残ります。アイコンだけの option は、未対応のブラウザで空の選択肢になります。WebKit の記事は、見た目では隠した文字（.visually-hidden）もアクセシビリティツリーには残る、と書いています
• 閉じたときの表示の中身に注意する。 MDN は、button の中の内容が支援技術に伝わる値を変えうる、と注意しています。上の例では、説明文を display: none で隠しています
• 選択の印やアイコンに意味を持たせない。 ::checkmark（選択中の印）と ::picker-icon（開閉の印）はアクセシビリティツリーに入りません。見た目の飾りとして扱います

手元で確かめたこと

上の HTML と CSS を、Playwright 1.63.0 の Chromium 153（ヘッドレス）で動かしました。

• CSS.supports('appearance: base-select') は true、select の計算値は base-select
• 値を lite に変えると、<selectedcontent> の中身も「ライト 月10件まで」に入れ替わる（表示は CSS で説明文を隠して「ライト」だけ）
• フォーカスして Enter で一覧が開き（:open が true）、矢印キーと Enter で値が変わる
• 高さ60pxで overflow: hidden の親の中に置いても、開いた一覧は親の外まで表示され、クリックで選べる位置にある
• FormData で選んだ値（pro）が取れる
• アクセシビリティツリーでは、select は combobox「プラン」、各 option は「ライト 月10件まで」のように文字の内容が名前になる

Firefox と Safari では、この環境では動かしていません。未対応のブラウザでの見え方は、MDN と WebKit の記事の説明によります。

option の中に入れてよいもの、いけないもの

MDN は、option の中に入れられるものとして、画像や、操作しない文字レベルの要素（span、strong など）を挙げています。HTML の仕様では、option の中に操作できる要素（リンク、ボタン、入力欄など）を置いてはいけません。

「選択肢ごとに詳しく見るリンクを置きたい」と言われたら、それは select ではなく、ラジオボタンのグループや、リンクを並べたメニューの出番です。部品を選び直すことをデザイナーに提案するのが、結局いちばんの近道です。

出す前に確かめる手順

• 対応しているブラウザ（Chrome・Edge・Safari 27 以降）で、見た目と開閉を確かめる
• Firefox で、ふつうの select として選べる。option の文字だけで意味が通じる
• Tab でフォーカスでき、Enter・Space・矢印キーで開いて選べる。Esc で閉じる
• スクリーンリーダーで、ラベル（「プラン」）と、選ばれている値が読まれる
• iPhone と Android の実機で、OS の部品が出なくなることを関係者が了承している
• フォームを送信して、選んだ value が届く
• 一覧が長いとき、画面の端で切れない（Safari 27.2 は safe の配置で画面内に収める）

まとめ

• カスタマイズ可能な select は、2026年11月時点で Chrome・Edge（135 以降）と Safari 27.0 以降で使え、Firefox では既定では使えません。対応していないブラウザではふつうの select に戻ります
• select と ::picker(select) の両方に appearance: base-select を指定し、作り込みは @supports で囲みます。option には必ず文字を入れます
• option に入れてよいのは画像や操作しない文字の要素までです。リンクや入力が要るなら、select ではなく別の部品を選びます

自作のドロップダウンを本物の select に置き換えるかの見極めや、デザインと実装の受け渡しで迷ったら、MODS BASE にご相談ください。

参考

• WebKit Features for Safari 27.0（WebKit、2026年9月17日）
• WebKit Features for Safari 27.2（WebKit、2026年10月26日）
• The golden rule of Customizable Select（WebKit、2026年6月15日）
• The <select> element can now be customized with CSS（Chrome for Developers、2025年3月24日）
• Intent to ship: Customizable select（blink-dev）
• CSS appearance: base-select（Can I use）
• Customizable select elements（MDN）
• HTML Standard: The option element（WHATWG）
• Bug 1944403 - [META] Implement customizable select element（Mozilla Bugzilla）