【CSS】select要素をカスタマイズできる！Customizable selectとは？

はじめに

↑こちらは、2025年に使えるようになったCSSの新機能をChrome DevRelチームが紹介しているサイトです。
今回は、Customizable selectについて学びます

Customizable selectとは？

HTMLのselect要素をCSSでカスタマイズする技術です。
従来は、select要素で表現できる見た目は限られていました。

2025年3月のChrome 134でサポートされた Customizable selectでは、 <select>タグの中に、<div>, <span>, <img>, <svg> の記述が可能になりました。

そのため、選択肢に画像を使ったり、flex-boxを適用することができて、カスタマイズの幅が広がりました。

追加されたHTML, CSS機能

こちらは CSS Wrapped 2025 ページにあるデモと同じものです。
以下のコードを参考にしながら、追加された機能について理解します

See the Pen select-2 by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

appearance:base-select;

これを指定することで、select要素と::picker(select)(説明後述)を、ブラウザ標準のスタイルから、カスタマイズ可能になります。

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

<selectedcontent>

button要素内にオプションで含めることができる要素です。

• ユーザーがリストからoptionを選びます
• すると、optionの中身がbuttonの中の<selectedcontent>内に丸ごとコピーされます

<button>
    <selectedcontent></selectedcontent>
    <span class="arrow"></span>
</button>

選択肢部分とボタンのUIで、一部違う部分を調整しやすくなりました。
以下のように、リスト内では表示されている説明文を、buttonでは非表示にすることができます。

selectedcontent p {
  display: none;
}

::picker(select)

セレクトボックスをクリックした時の、ドロップダウンとして表示されるポップオーバー部分をターゲットにする擬似要素です。
はじめのbutton要素以外の、select内全ての要素が含まれます。

この擬似要素によって、リストに角丸やドロップシャドウをつけるといったカスタマイズできます。

.monster-select::picker(select) {
  width: 250px;
  margin: 0.5rem 0;
  padding: 10px;
  border: none;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  background: light-dark(white, #333);
}

:open

セレクトボックスが開いているときの選択ボタンをターゲットにする擬似クラスです。

この擬似クラスによって、セレクトボックスが開いている間のボタンのスタイルを指定することができます。

.monster-select:open button {
  border-color: light-dark(#8A2BE2, violet); /* 開いている時は枠線に色をつける */
}

.monster-select:open .arrow {
  transform: rotate(135deg); /* 開いている時は矢印を上に向ける */
}

::picker-icon

選択ボタン内のアイコン（矢印🔽）をターゲットにする擬似要素です。
ブラウザが標準で用意する下向き矢印を消しています。

select { 
    &::picker-icon {
        display: none; 
    }
}

代わりに<span class="arrow"></span>で矢印を作っています。

/*新しいピッカーアイコン(矢印)*/
.arrow {
  width: 10px;
  height: 10px;
  margin-right: 0.5rem;
  border-left: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

::checkmark

現在選択されているoption要素をターゲットにする擬似要素です。

選択されたoption要素に、自動で付与されるチェックマークを非表示にしています。

option {
    &::checkmark {
        display: none; 
    }
}

:checked

今回のコード例には含まれていませんが、紹介します。
:checkedは現在選択されている option要素をターゲットにする擬似クラスです。

option:checked {
  background-color: light-dark(#e0cffc, #4b0082);
  border: 2px solid #8A2BE2;
}

上記を追加してみると、選択されているSpikeの背景色とborderが変化・追加されていることがわかります。

さいごに

今回は、Customizable selectについて学びました！
様々な要素や擬似要素・クラスが追加されたことで、セレクトボックスのカスタマイズが簡単になりました。
セレクトしたタイミングでアニメーションさせても面白そう

アドカレ2025が開催中！

今年もアドカレ開催中です
最終日まであとちょっと...！！！

特設サイト ↓

ギフトカードや Airpods, iPadなど、豪華賞品すぎるプレゼントカレンダーは必見！ ↓

参考