::picker-icon

構文

::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 要素