Customizable <select>
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
<selectedcontent> HTML は、<select> 要素内で使用され、現在選択されている <option> のコンテンツを、その最初のまず子要素である <button> 内に表示させます。これにより、 <select> 要素のすべての部分をスタイル設定することができるようになり、これを「カスタマイズ可能な選択リスト」と呼びます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 135 | 135 | | | 135 | | |
| CSS プロパティ | ||||||
base-select | 135 | 135 | | Preview | 135 | |
| その他 | ||||||
| チェックマーク | 133 | 133 | | | 133 | |
| `::ピッカー()` | 135 | 135 | | Preview | 135 | |
| ピッカーアイコン | 133 | 133 | | Preview | 133 | |
基本構文
HTML
<style>
select, ::picker(select) {
appearance: base-select;
}
</style>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>ライブデモ
Styled select shell
Use a normal select control as the semantic base while styling its outer shell.
プレビュー全画面表示
Customizable-select note
Summarize the progressive-enhancement mindset for upcoming select customization features.
プレビュー全画面表示
実務での使いどころ
-
Customizable <select> の活用
Experimental: これは実験的な機能です。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。