::picker-icon はCSS の擬似要素で、アイコンが関連付けられたフォームコントロール内のピッカーアイコンを対象とします。カスタマイズ可能な select 要素の場合、<select> 要素に示される矢印アイコン（閉じられた状態では下向きを指す）を選択します。

構文

::picker-icon {  /* ... */}

解説

::picker-icon擬似要素は、フォームコントロールのピッカーアイコン、すなわちコントロールボタン上に表示させるアイコンを対象とします。 元の要素にピッカーがあり、かつappearance プロパティのbase-select 値によって基本的な外観が設定されている場合にのみ、対象として利用できます。 生成されたボックスは、::after 擬似要素によって生成されたボックスの後に現れ、既定のブラウザースタイルシートで指定されたアイコンが表示されます。content プロパティを使用してカスタマイズできます。

::picker-icon セレクターを使用すると、カスタマイズ可能な select 要素のインライン末尾側にある下向きの矢印を選択できます。例えば、アイコンの色やサイズをカスタマイズしたり、別のアイコンに（content やSVG を使用して）置き換えたり、ピッカーが開くための操作時と閉じられた時にアニメーションを適用したい場合に便利です。

現在はカスタマイズ可能な<select> ピッカーアイコンの選択が、::picker-icon の唯一の用途ですが、将来的に追加される可能性があります。

例

ピッカーアイコンのアニメーション

カスタマイズ可能な選択機能を利用するには、<select> 要素とそのピッカーの両方に、appearance 値としてbase-select を設定する必要があります：

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

そうすれば、例えば::picker-icon を対象として、独自のcolor とtransition を適用することで、そのrotate プロパティの変更を滑らかにアニメーションさせることができます。

select::picker-icon {  color: #999999;  transition: 0.4s rotate;}

次のルールでは、::picker-icon が<select> が開かれていた場合にのみアイコンを対象とする擬似クラス:open と組み合わされ、<select> が開かれた際にrotate の値を180deg にトランジションさせます。

select:open::picker-icon {  rotate: 180deg;}

このコードを使用した、完全な例とライブのレンダリング例については、ピッカーアイコンのスタイル設定を参照してください。

仕様書

ブラウザーの互換性

関連情報

• <select>,<option>,<optgroup>,<label>,<button>,<selectedcontent>
• appearance
• ::picker(select),::checkmark
• :open,:checked
• カスタマイズ可能な select 要素