::picker-icon CSS pseudo-element

Syntax

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

Description

The ::picker-icon pseudo-element targets the picker icon of form controls, that is, the icon shown on the control button. It is only available to target when the originating element has a picker and has base appearance set on it via the appearance property base-select value. Its generated box appears after any boxes generated by the ::after pseudo-element, with the icon specified in default browser stylesheet; you can customize it using the content property.

The ::picker-icon selector can be used to select the down-facing arrow on the inline-end side of a customizable select element. This is useful for example if you want to customize the color or size of the icon, use a different icon (using content or SVG), or animate it when the picker is opened and closed.

Selecting customizable <select> picker icons is the only current use case for ::picker-icon, but more may be added in the future.

Examples

Animating the picker icon

To opt-in to customizable select functionality, the <select> element and its picker both need to have an appearance value of base-select set on them:

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

You could then, for example, target the ::picker-icon and give it a custom color and a transition so that changes to its rotate property are smoothly animated:

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

In the next rule, ::picker-icon is combined with the :open pseudo-class — which targets the icon only when the picker is open — transitioning it to a rotate value of 180deg when the <select> is opened.

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

See Styling the picker icon for a full example that uses this code, along with a live example rendering.

Specifications

Browser compatibility

See also

• <select>, <option>, <optgroup>, <label>, <button>, <selectedcontent>
• appearance
• ::picker(select), ::checkmark
• :open, :checked
• Customizable select elements