::picker() CSS Pseudo Element

The ::picker() pseudo‑element in CSS is an experimental pseudo‑element that lets you style the picker portion of certain form controls - essentially the part that “pops up” to let users make a selection. It’s defined as part of the evolving form control styling features and has limited browser support, so it should be used cautiously in production.

What it targets

The ::picker() pseudo‑element targets the picker part of an element - for example, the drop‑down list that appears when a user opens a customizable <select> control. It does not style the control’s main button itself, only the floating part that displays the selections.

• <ident> is an identifier that describes the type of picker you want to style.
• Currently one common value is select, meaning the drop‑down section of a customizable <select> control.

When it applies

For ::picker(select) to work:

• The originating element must be one that has a picker, such as a <select> element with a custom appearance.
• The originating element typically needs its appearance CSS property set to base-select to enable the customizable form control appearance.

Relationship to other parts

• The pseudo‑element applies to the picker contents, excluding the first <button> child of the control - that represents the button the user clicks to open the picker.
• The control and its picker have an implicit popover relationship (similar to popovers defined in the Popover API), which affects positioning and overlay behavior.

Related selectors (examples)

While working with ::picker(), you might also encounter:

• select - the native HTML dropdown control often used with the picker.
• appearance - CSS property needed to enable base‑select custom styling.
• ::picker-icon - another experimental pseudo‑element for styling the icon within such controls (e.g., the down arrow). (Only one link per class / element is included as you specified.)

Example

Here’s a simple example showing how you might style the picker area of a <select>:

<select class="fancy">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

/* Enable custom appearance */
.fancy,
.fancy::picker(select) {
  appearance: base-select;
}

/* Style the picker dropdown */
.fancy::picker(select) {
  border: 2px solid #3498db;
  background: #f0f8ff;
  padding: 0.5em;
}

In this snippet:

• Setting appearance: base-select opt‑in enables the browser to render the native picker in a way that supports styling.
• The ::picker(select) selector then styles the dropdown menu itself.

Summary:* ::picker() is a cutting‑edge CSS pseudo‑element for targeting and styling the picker portions of form controls such as customizable <select> elements. It’s useful for customizing the dropdown UI as a unit, but be aware it’s experimental and browser support may vary.