Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。
フォーム Limited support

Customizable <select>

カスタマイズ可能な <select> により、ドロップダウンの外観を CSS でスタイリングし、option 内にリッチなコンテンツを配置できます。

フォーム

概要

カスタマイズ可能な <select> により、ドロップダウンの外観を CSS でスタイリングし、option 内にリッチなコンテンツを配置できます。

対応ブラウザ

デスクトップ

Chrome 135+
Edge 135+
Safari 未対応
Firefox 未対応

モバイル

Chrome Android 135+
Safari iOS 未対応
Firefox Android 未対応

基本構文

HTML 
<style>
  select, ::picker(select) {
    appearance: base-select;
  }
</style>
<select>
  <option value="1">オプション 1</option>
  <option value="2">オプション 2</option>
</select>

実務での使いどころ

  • Customizable <select> の活用

    カスタマイズ可能なselect要素。ネイティブselectのスタイリングを可能にする機能。

注意点

  • 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク