CSS ::picker() Pseudo-Element

CSS ::picker() Pseudo-Element

The ::picker() pseudo-element styles the picker portion of certain form controls. Currently, its defined argument is select, allowing developers to customize the dropdown picker of an HTML <select> element when the control opts into customizable select styling.

Syntax

selector::picker(select) {
  property: value;
}

The selector identifies the form control whose picker should be styled.

The select argument identifies the picker associated with an HTML <select> element.

For example:

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

This rule styles the dropdown picker of a customizable select element.

The select argument is required and is not enclosed in quotation marks.

The following selector is not valid:

select::picker {
  background-color: #f8f9fa;
}

The functional notation ::picker(select) must be used.

Important: Styling the picker requires the select control to opt into customizable select rendering using appearance: base-select.

How It Works

Traditional HTML select elements use browser and operating system controls to display dropdown options.

These native pickers provide built-in functionality but offer limited control over their appearance.

Customizable select elements allow developers to style more of the control using CSS.

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

To customize a select picker:

1. Create a standard HTML <select> element with options.
2. Apply appearance: base-select to the select element.
3. Apply appearance: base-select to its ::picker(select) pseudo-element.
4. Add CSS declarations to customize the picker and its options.

For example:

select, select::picker(select) {
  appearance: base-select;
}
select::picker(select) {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
}

Supporting browsers display a customizable picker using the specified styles.

Browsers that do not support customizable select controls continue to use their native select interface.

The underlying HTML control retains its selection and form submission behavior.

The appearance: base-select Value

The appearance property controls whether certain form controls use their native appearance or an alternative rendering style.

The base-select value enables customizable select rendering in supporting browsers.

For example:

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

The first rule opts the select control into customizable rendering.

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

Both declarations are important for a consistently customizable select control.

Without the appropriate opt-in, the browser may continue using its native picker interface.

Developers can combine the declarations:

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

The base-select value provides a starting point for custom styling while retaining the underlying select element's built-in behavior.

It is different from appearance: none, which removes native appearance but does not by itself enable the customizable picker model.

Basic Example

The following example creates a select element with a customized dropdown background and border.

HTML:

<label for="picker-basic">Choose a topic:</label>
<select id="picker-basic" class="picker-basic">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
</select>

CSS:

.picker-basic, .picker-basic::picker(select) {
  appearance: base-select;
}
.picker-basic {
  padding: 8px 12px;
  border: 1px solid #999;
  border-radius: 4px;
}
.picker-basic::picker(select) {
  background-color: #eef5ff;
  border: 1px solid #0066cc;
  border-radius: 6px;
  padding: 5px;
}

Open the dropdown to view its options.

In supporting browsers, the picker displays a light blue background, blue border, and rounded corners.

In unsupported browsers, the native dropdown remains available.

The CSS targets the picker itself rather than changing the text or values of the options.

Styling the Picker

The ::picker(select) pseudo-element supports ordinary CSS styling for the customizable picker.

Changing the Background

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

This rule changes the dropdown picker's background color.

Adding a Border

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

This rule adds a blue border with rounded corners.

Adding a Shadow

select::picker(select) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

This rule adds a shadow around the dropdown picker.

Adding Spacing

select::picker(select) {
  padding: 6px;
}

This rule adds spacing inside the picker.

These declarations can be combined to create a dropdown that matches the surrounding webpage.

The select element and its picker can be styled separately.

Styling Select Options

The ::picker(select) pseudo-element styles the picker container, while the <option> elements can receive their own CSS styles in customizable select controls.

For example:

select, select::picker(select) {
  appearance: base-select;
}
select::picker(select) {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
}
select option {
  padding: 10px 12px;
  border-radius: 4px;
}
select option:hover {
  background-color: #eef5ff;
}

The picker receives its own border and background.

The options receive padding and rounded corners.

Hovering over an option changes its background color where the interaction is supported.

Customizable select controls also support additional features, including richer option content and the ::checkmark pseudo-element.

Note: Styling options in traditional native select controls is more restricted and may vary between browsers.

The :open Pseudo-Class

The :open pseudo-class can style a select element while its dropdown picker is open.

For example:

select:open {
  border-color: #0066cc;
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

When the dropdown opens, the select element receives a blue border and outline.

The :open pseudo-class targets the state of the select element, not the picker container.

It can be combined with ::picker(select) styling:

select, select::picker(select) {
  appearance: base-select;
}
select:open {
  border-color: #0066cc;
}
select::picker(select) {
  background-color: #eef5ff;
  border: 1px solid #0066cc;
}

The select control changes its border when open, while the picker uses the specified background and border.

This provides visual feedback without replacing the native selection behavior.

::picker() and ::picker-icon

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

::picker(select)

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

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

::picker-icon

The ::picker-icon pseudo-element represents the picker indicator associated with the closed select control.

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

The icon changes color and rotates when the select opens.

The ::picker-icon pseudo-element does not style the dropdown container itself.

Both pseudo-elements can be used together to customize the picker and its indicator.

Example

The following example combines a customized select control, styled picker, option spacing, and an animated picker icon.

HTML:

<label for="picker-styled">Select a CSS topic:</label>
<select id="picker-styled" class="picker-styled">
  <option value="selectors">CSS Selectors</option>
  <option value="properties">CSS Properties</option>
  <option value="pseudo-elements">CSS Pseudo-Elements</option>
  <option value="layout">CSS Layout</option>
</select>

CSS:

.picker-styled, .picker-styled::picker(select) {
  appearance: base-select;
}
.picker-styled {
  min-width: 220px;
  padding: 10px 14px;
  border: 1px solid #999;
  border-radius: 6px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
}
.picker-styled:open {
  border-color: #0066cc;
}
.picker-styled::picker(select) {
  background-color: #fff;
  border: 1px solid #0066cc;
  border-radius: 6px;
  padding: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.picker-styled option {
  padding: 10px 12px;
  border-radius: 4px;
}
.picker-styled option:hover {
  background-color: #eef5ff;
}
.picker-styled::picker-icon {
  color: #0066cc;
  transition: transform 0.2s;
}
.picker-styled:open::picker-icon {
  transform: rotate(180deg);
}

Open the select control to view the customized picker.

In supporting browsers, the picker displays a white background, blue border, rounded corners, and a shadow.

The options have additional spacing and hover styling.

The picker icon rotates when the dropdown opens.

In browsers without customizable select support, the native dropdown remains functional.

Supported CSS Properties

The ::picker(select) pseudo-element can use ordinary CSS styling properties, subject to the layout and rendering behavior of the customizable picker.

Common property groups include:

For example:

select::picker(select) {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

These declarations customize the picker's visual appearance.

Unlike text-only pseudo-elements, ::picker(select) represents a rendered picker container and supports box-model styling.

Some positioning and sizing behavior is controlled by the browser's picker and popover implementation.

Limitations

The ::picker() pseudo-element has several important limitations.

• The currently defined argument is select.
• It requires support for customizable select elements.
• The control and picker must opt into customizable rendering using appearance: base-select.
• Older browsers may ignore the pseudo-element.
• Traditional native select pickers cannot be fully customized using this selector.
• Some picker positioning and interaction behavior remains browser-controlled.
• Custom styles must preserve readable options and usable controls.

For example, the following selector does not provide a valid way to style a select picker:

select::picker(dropdown) {
  background-color: yellow;
}

The dropdown argument is not defined for this pseudo-element.

Use ::picker(select) instead.

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

Accessibility Considerations

Customizable select elements retain native form control behavior, but custom styling must preserve accessibility.

Follow these accessibility practices:

• Associate each select element with a visible <label>.
• Maintain sufficient contrast between option text and backgrounds.
• Preserve visible keyboard focus indicators.
• Ensure options remain easy to identify and select.
• Do not rely on color alone to communicate selection states.
• Test keyboard navigation and screen reader behavior.
• Avoid animations that interfere with usability.
• Provide a functional native fallback for unsupported browsers.

The ::picker(select) pseudo-element changes the presentation of the dropdown picker without replacing the underlying select element.

Using a native <select> preserves important built-in form semantics and interactions.

Developers should test customized controls across supported browsers and assistive technologies.

Browser Support

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

Support for customizable select controls and appearance: base-select may differ between browser versions.

Browsers that do not support the feature generally continue to display the native select control.

Developers can use CSS feature queries to apply enhanced styling conditionally:

@supports (appearance: base-select) {
  select, select::picker(select) {
    appearance: base-select;
  }
  select::picker(select) {
    background-color: #eef5ff;
    border: 1px solid #0066cc;
  }
}

This approach allows supporting browsers to use the customized picker while other browsers retain their native appearance.

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

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

Specifications

The ::picker() 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 how select controls can expose customizable picker interfaces while retaining their native form behavior.