CSS ::picker-icon Pseudo-Element

CSS ::picker-icon Pseudo-Element

The ::picker-icon pseudo-element represents the dropdown indicator of a customizable HTML <select> element. It allows developers to change the indicator's color, size, symbol, and appearance without adding a separate icon element to the HTML.

Syntax

selector::picker-icon {
  property: value;
}

The selector identifies the customizable select element.

The ::picker-icon pseudo-element targets the indicator displayed inside the select control.

For example:

select::picker-icon {
  color: #0066cc;
  font-size: 18px;
}

This rule changes the picker icon's color and font size.

The ::picker-icon pseudo-element does not accept an argument.

Unlike ::picker(select), it uses a simple pseudo-element name without parentheses.

Important: The picker icon is available for customizable select elements that use appearance: base-select in supporting browsers.

How It Works

HTML select elements normally display a dropdown indicator that tells users additional options are available.

Traditional select controls use an indicator provided by the browser or operating system.

Customizable select elements expose a picker icon that can be styled with CSS.

The ::picker-icon pseudo-element targets that indicator without affecting the dropdown options.

For example:

select {
  appearance: base-select;
}
select::picker-icon {
  color: #0066cc;
}

The select element opts into customizable rendering, and its picker icon receives a blue color.

The icon can also respond to changes in the select element's state.

For example, the :open pseudo-class can be combined with ::picker-icon to rotate the indicator while the dropdown is open.

The underlying select element continues to manage option selection and form values.

The appearance: base-select Value

The appearance: base-select declaration enables customizable rendering for supported select controls.

For example:

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

The first selector opts the select element into customizable rendering.

The second selector opts its dropdown picker into the customizable appearance.

Once the select element uses the customizable model, the picker icon can be styled independently.

select::picker-icon {
  color: #0066cc;
  transition: transform 0.2s;
}

The icon receives a blue color and a transition for changes to its transform.

The appearance: base-select value is different from appearance: none.

The none value removes native control styling but does not automatically provide the customizable select features.

Browsers that do not support base-select continue using their native select appearance.

Default Picker Icon

When a select element opts into customizable rendering, the browser provides a default picker icon.

The icon commonly resembles a downward-pointing arrow or chevron.

Its appearance can vary depending on the browser and operating system.

For example:

<label for="default-picker">Choose a language:</label>
<select id="default-picker">
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
</select>

The following CSS enables customizable select rendering:

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

In supporting browsers, the select control displays its customizable picker indicator.

Developers can then use ::picker-icon to change the indicator's appearance.

Changing the Icon Color

The color property changes the picker icon's color.

HTML:

<label for="picker-icon-color">Choose a topic:</label>
<select id="picker-icon-color" class="picker-icon-color">
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
</select>

CSS:

.picker-icon-color, .picker-icon-color::picker(select) {
  appearance: base-select;
}
.picker-icon-color {
  min-width: 200px;
  padding: 10px 12px;
  border: 1px solid #999;
  border-radius: 4px;
}
.picker-icon-color::picker-icon {
  color: #0066cc;
  font-size: 20px;
}

In supporting browsers, the dropdown indicator appears blue and uses a larger font size.

The option text and dropdown picker retain their normal appearance.

Browsers without customizable select support display their native indicator.

Creating a Custom Icon

The content property can replace the default picker indicator with a custom symbol.

For example:

select::picker-icon {
  content: "\25BC";
  color: #0066cc;
  font-size: 14px;
}

The \25BC escape represents a downward-pointing triangle.

The browser uses this character as the picker icon in place of its default indicator when the feature is supported.

Another option is to use a chevron character:

select::picker-icon {
  content: "\2304";
  color: #0066cc;
  font-size: 22px;
}

The \2304 escape represents a downward arrowhead character.

The exact appearance depends on the font used by the browser.

Custom icon content should remain recognizable as a dropdown indicator.

Note: Custom picker icon content is decorative. The select element itself provides the interactive behavior and accessible name.

Rotating the Icon When Open

The :open pseudo-class can be combined with ::picker-icon to change the indicator when the dropdown opens.

For example:

select::picker-icon {
  color: #0066cc;
  transition: transform 0.2s;
}
select:open::picker-icon {
  transform: rotate(180deg);
}

The icon rotates 180 degrees while the select element is open.

When the dropdown closes, the icon returns to its original position.

The transition property animates the rotation.

This technique provides visual feedback about the select control's state.

For users who prefer reduced motion, the animation can be disabled:

@media (prefers-reduced-motion: reduce) {
  select::picker-icon {
    transition: none;
  }
}

The icon still changes orientation, but the transition is removed.

Example

The following example creates a select control with a custom blue triangle that rotates when the dropdown opens.

HTML:

<label for="picker-icon-example">Select a CSS topic:</label>
<select id="picker-icon-example" class="picker-icon-example">
  <option value="selectors">CSS Selectors</option>
  <option value="properties">CSS Properties</option>
  <option value="layout">CSS Layout</option>
  <option value="animations">CSS Animations</option>
</select>

CSS:

.picker-icon-example, .picker-icon-example::picker(select) {
  appearance: base-select;
}
.picker-icon-example {
  min-width: 220px;
  padding: 10px 14px;
  border: 1px solid #999;
  border-radius: 6px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
}
.picker-icon-example:open {
  border-color: #0066cc;
}
.picker-icon-example::picker-icon {
  content: "\25BC";
  color: #0066cc;
  font-size: 14px;
  margin-left: 12px;
  transition: transform 0.2s;
}
.picker-icon-example:open::picker-icon {
  transform: rotate(180deg);
}
.picker-icon-example::picker(select) {
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
@media (prefers-reduced-motion: reduce) {
  .picker-icon-example::picker-icon {
    transition: none;
  }
}

Open the dropdown to observe the picker icon.

In supporting browsers, a blue triangle appears inside the select control.

The triangle rotates when the dropdown opens and returns to its original position when it closes.

The picker also receives a border, rounded corners, and a shadow.

In unsupported browsers, the select control remains functional using its native appearance.

::picker() vs. ::picker-icon

The ::picker() and ::picker-icon pseudo-elements target different parts of a customizable select element.

::picker(select)

The ::picker(select) pseudo-element represents the dropdown picker containing the available options.

select::picker(select) {
  background-color: #eef5ff;
  border: 1px solid #0066cc;
  border-radius: 6px;
}

This rule styles the dropdown container.

::picker-icon

The ::picker-icon pseudo-element represents the dropdown indicator displayed inside the select control.

select::picker-icon {
  color: #0066cc;
  font-size: 18px;
}

This rule styles the indicator rather than the dropdown container.

Both pseudo-elements can be used together to customize the appearance of a select control.

Supported CSS Properties

The ::picker-icon pseudo-element supports CSS properties appropriate for styling generated content.

Common properties include:

For example:

select::picker-icon {
  content: "\25BC";
  color: #0066cc;
  font-size: 14px;
  margin-left: 10px;
  transition: transform 0.2s;
}

These declarations replace the default indicator with a blue triangle and prepare it for animated rotation.

The actual appearance depends on the browser's customizable select implementation.

Limitations

The ::picker-icon pseudo-element has several important limitations.

• It requires browser support for customizable select elements.
• It is associated with select controls using appearance: base-select.
• It styles the picker indicator, not the dropdown options.
• It does not replace the underlying select element's behavior.
• Older browsers may ignore the pseudo-element.
• Custom symbols can vary depending on the available fonts.
• Its appearance may be affected by browser-specific form control rendering.

For example, the following rule does not style the dropdown container:

select::picker-icon {
  background-color: #eef5ff;
}

This rule targets the icon's background rather than the picker containing the options.

To style the dropdown container, use:

select::picker(select) {
  background-color: #eef5ff;
}

For compatibility, keep standard HTML select markup so unsupported browsers can display their native controls.

Accessibility Considerations

The picker icon helps users recognize that a select control contains additional options.

Custom styling should preserve this visual cue and the control's accessibility.

Follow these accessibility practices:

• Use recognizable symbols for dropdown indicators.
• Maintain sufficient contrast between the icon and its background.
• Do not rely on the icon alone to identify the purpose of the select control.
• Associate the select element with a visible <label>.
• Preserve visible keyboard focus indicators.
• Ensure custom animations do not interfere with usability.
• Respect reduced-motion preferences when animating the icon.
• Test customized controls with keyboard navigation and assistive technologies.

The ::picker-icon pseudo-element changes only the presentation of the indicator.

The select element itself continues to provide the form control's semantics, accessible name, and selection behavior.

Custom icon content should remain decorative rather than carrying essential information.

Browser Support

The ::picker-icon pseudo-element is a newer CSS feature with limited browser availability.

Support depends on the browser's implementation of customizable select elements and appearance: base-select.

Browsers that do not support the feature generally retain their native dropdown indicators.

Developers can use a CSS feature query to apply customizable select styling conditionally:

@supports (appearance: base-select) {
  select, select::picker(select) {
    appearance: base-select;
  }
  select::picker-icon {
    color: #0066cc;
    font-size: 18px;
  }
}

This allows supporting browsers to apply custom picker icon styling while unsupported browsers continue using their native controls.

For current compatibility information, visit Can I Use? and search for ::picker-icon or customizable select elements.

Also consult the MDN documentation for implementation details and browser compatibility.

Specifications

The ::picker-icon pseudo-element is defined in the CSS Form Control Styling Level 1 .

Customizable select behavior is also described in the WHATWG HTML Living Standard .

These specifications describe customizable select controls and the pseudo-elements used to style their internal components.