Customizable <select>
従来はスタイリングが困難だった<select>要素を、CSSで自由にデザインできるようにする機能です。ボタン部分、ドロップダウンパネル、各オプションのスタイルを個別に制御できます。ネイティブのセマンティクスとアクセシビリティを維持しながら、ブランドに合ったデザインを実現します。
概要
従来はスタイリングが困難だった<select>要素を、CSSで自由にデザインできるようにする機能です。ボタン部分、ドロップダウンパネル、各オプションのスタイルを個別に制御できます。ネイティブのセマンティクスとアクセシビリティを維持しながら、ブランドに合ったデザインを実現します。
対応ブラウザ
デスクトップ
Chrome 135+
Edge 135+
Safari 未対応
Firefox 未対応
モバイル
Chrome Android 135+
Safari iOS 未対応
Firefox Android 未対応
基本構文
CSS
select,
::picker(select) {
appearance: base-select;
}
select::picker(select) {
background: white;
border: 1px solid #ccc;
}実務での使いどころ
-
ブランド統一のフォームデザイン
ネイティブ<select>のアクセシビリティを保ちながら、サイト全体のデザインシステムに合わせた選択ボックスを構築します。
注意点
- Chrome/Edgeのみ対応のため、他ブラウザではデフォルトの<select>表示にフォールバックするよう設計してください。
アクセシビリティ
- カスタムスタイリング後もキーボード操作（矢印キー、Enter、Escape）が正常に動作することを必ず確認してください。