::picker-icon

The CSS ::picker-icon pseudo-element allows us to style the icon of a customizable <select> element which is the little triangle that indicates the element is a dropdown menu.

For example, we can change the icon from a triangle to a checkmark:

::picker-icon {
  content: "✓";
}

Notice that the default picker icon is used if the current browser does not support the ::picker-icon pseudo-element.

The specification says that ::picker-icon should work for other HTML form elements in the future, like <input type="date">, <input type="datetime">, and <input type="time">. That means we can expect support for these, and perhaps others, in the future.

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

Syntax

::picker-icon {
  /* CSS styles */
}

In other words, we simply declare the pseudo-element and apply styles to it.

Values

/* can be emoji, text or an animated gif */
::picker-icon {
  content: "+";
}

/* works with any CSS property */
::picker-icon {
  color: blue;
  background-color: black;
}

There are two requirements for this property to work:

1. The element has some sort of “picker.” Right now, that’s just the <select> but, like we said earlier, that should extend to other HTML form elements later, such as date inputs, time inputs, color inputs, among others.
2. The element and its ::picker()‘s  appearance property is set to base-select (more on this):

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

Basic usage

The default picker icon can be modified with any CSS property. However, if you want to change it from the default icon (which is the little triangle for a <select> element), then use the content property. For example, we can swap that triangle out for a plus character instead:

::picker-icon {
  content: "+";
}

We can apply basic styles to the dropdown using CSS color, background-color, even transitions (as we’ll see in a bit):

::picker-icon {
  background: linear-gradient(135deg, #e63946, #ff6b6b);
  border-radius: 6px;
  color: white;
  padding: 0.25em;
  text-align: center;
  transition: background 0.3s ease, transform 0.3s ease;
  width: 1rem;
}

It’s also good to note that the <select> dropdown is a flex container by default:

Therefore, it’s a good practice to set align-items to center when using a custom ::picker-icon. For example, this is how the demo above would look without centering:

It looks wonky because the content isn’t aligned to the ::picker-icon. Fixing it with justify-content and align-items makes it look better, like we did in the initial demos.

Future demo for ::picker-icon

As you’re already well aware, ::picker-icon is currentyl limited to just <select>, but we’ll be able to use it with:

• <input type="date"/>
• <input type="datetime"/>
• <input type="time"/>
• <input type="month"/>
• <input type="week"/>

So here’s a future demo for all of them that should work as support is extended to more form elements:

The default icons should all change to the plus (+) character once browser support arrives.

Animating the dropdown icon

You can apply transitions/animations to the picker icon using either the animation property when the picker is in its open or closed state using the @starting-style at-rule, or when using only the :open pseudo-class.

For example, we can apply animations on the :open state and :not() when it is closed:

/* change to a plus character */
::picker-icon {
  content: "+";
}

/* when the element is closed */
:not(:open)::picker-icon {
  animation: changeIconBack 1s 1 forwards;
}

/* when the element is open */
:open::picker-icon {
  animation: changeIcon 1s 1 forwards;
}

As mentioned, we can also use the @starting-style rule to apply a transition for when the picker icon is in its open state as an alternate method:

/* change the icon and apply a transition */
::picker-icon {
  content: "+";
  transition: all 0.4s ease;
  transition-behavior: allow-discrete;
}

/* change icon to a minus character and rotate it when open */
:open::picker-icon {
  content: "-";
  rotate: 180deg;

  /* make sure the icon is a plus character before the transition starts */
  @starting-style {
    content: "+";
  }
}

We can enhance this even further using :open instead of applying the @starting-style. It’s less verbose than the last two examples:

Demo

Here’s a demo that uses an animated GIF for the ::picker-icon.

Specification

The CSS ::picker-icon pseudo-element is defined in the CSS Form Control Styling Level 1 specification, which is currently in Editor’s Draft status. That means the information can change between now and when it officially becomes a formal Candidate Recommendation for browsers to implement.

Browser support

Chrome	Edge	Firefox	Safari
135	135	No	No

It’s also worth noting the current support for the customizable select element, which is the only element that supports ::picker-icon at the time of writing.

Further reading

Related