appearance: base-select でネイティブ select をスタイルする

appearance: base-select と ::picker(select) で、OS描画のドロップダウンをやめ、画像付き option など通常のCSSで見た目を制御できる。

どんな時に使う？

国旗・アイコン付きの言語／国セレクトなど、カスタム見た目が欲しいが、フォームの値送信やキーボード操作はネイティブ <select> のまま残したいとき。独自のリストボックスをJSで組む代わりになる。

コード／手順

select 本体とピッカーの両方に appearance: base-select を指定する（片方だけだと不完全）。

css

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

マークアップ側では、表示用ボタンに <selectedcontent>、各 <option> に画像などを置ける。

html

<select>
  <button type="button">
    <selectedcontent></selectedcontent>
  </button>
  <option><img src="fr.svg" alt=""> France</option>
  <option><img src="jp.svg" alt=""> Japan</option>
</select>

<selectedcontent> は選んだ option の内容をボタン側に映す。
ネイティブ select のままなので、name / value・キーボード・フォーム送信はそのまま使える。
未対応ブラウザ向けには @supports (appearance: base-select) で囲み、通常のネイティブ select にフォールバックする。

注意点・対応状況

Chrome / Edge 135+、Safari 27+ で利用可能。Firefox は実装があるがフラグOFFのため通常利用不可（2026-10時点）。
base-select にすると、OSネイティブのモバイルピッカーや「最長 option 幅に合わせる」挙動などは失われる。意図したUXか確認する。
<button> / <selectedcontent> を含むマークアップは対応ブラウザでパーサ挙動が変わる。未対応環境では画像などが option 内に出ないことがあるので、テキストだけのフォールバックを想定する。

出典

@sanyampunia · 2026-10-10