カスタマイズ可能な select:picker というもの

Author:

君は一体、、、いつから存在していたの???

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

これで、select が色々できるようになるみたい。

select のスタイルを変更できるjQueryのライブラリはいくつかあったけど、これはjQuery必要ない!すご!

option タグの中に span タグとか入れれるみたい。

<select>
  <button>
    <selectedoption></selectedoption>
    <span class="arrow"></span>
  </button>
  <option value="reply">
    <span class="material-symbols-outlined">
      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M760-200v-160q0-50-35-85t-85-35H273l144 144-57 56-240-240 240-240 57 56-144 144h367q83 0 141.5 58.5T840-360v160h-80Z"/></svg>
    </span>
    <span class="text">Reply</span>
  </option>
  <option value="reply-all">
    <span class="material-symbols-outlined">
      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M320-280 80-520l240-240 57 56-184 184 184 184-57 56Zm480 80v-160q0-50-35-85t-85-35H433l144 144-57 56-240-240 240-240 57 56-144 144h247q83 0 141.5 58.5T880-360v160h-80Z"/></svg>
    </span>
    <span class="text">Reply all</span>
  </option>
  <option value="forward">
    <span class="material-symbols-outlined">
      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="m640-280-57-56 184-184-184-184 57-56 240 240-240 240ZM80-200v-160q0-83 58.5-141.5T280-560h247L383-704l57-56 240 240-240 240-57-56 144-144H280q-50 0-85 35t-35 85v160H80Z"/></svg>
    </span>
    <span class="text">Forward</span>
  </option>
  <hr>
  <option value="edit">
    <span class="text">Edit subject</span>
  </option>
  <option value="pop-out">
    <span class="text">Pop out reply</span>
  </option>
</select>

LINK:選択したオプションにスタイルを設定する

企業サイトなどでは実用性ないだろうけど、
ECサイトなどで、商品のオプション選択などでは役立つかもね。

詳しくは下記の記事を参照してね。

デベロッパー フィードバックのリクエスト: カスタマイズ可能な選択
https://developer.chrome.com/blog/rfc-customizable-select?hl=ja