::picker-icon Pseudo Element

::picker-icon CSS Pseudo Element

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The ::picker-icon pseudo-element is a specialized CSS construct that allows developers to target and style the icon portion of input elements that open a picker interface, such as date pickers, color pickers, and time pickers. This pseudo-element specifically isolates the interactive icon, separate from the input field itself, enabling fine-grained control over its appearance, size, and behavior. Typically, this pseudo-element is used in conjunction with input types like input[type="date"], input[type="time"], and input[type="color"] where browsers render a small icon to open the picker interface.

One of the key benefits of ::picker-icon is that it allows styling without affecting the text input itself. Common use cases include customizing the icon's color, width, height, margin, or even adding animations or transitions with transition. This is particularly useful when trying to maintain a consistent design language across form elements while still allowing the interactive icon to stand out or blend in with the UI.

For example, you might want to increase the size of a color picker icon and change its color when hovered over:

input[type="color"]::picker-icon {
    width: 2em;
    height: 2em;
    color: #ff6347;
    transition: transform 0.3s ease, color 0.3s ease;
}

input[type="color"]::picker-icon:hover {
    transform: scale(1.2);
    color: #ff4500;
}

In this example, the ::picker-icon pseudo-element is directly targeted to adjust both its size and color, and a hover effect is added to provide visual feedback to the user. It's important to note that browser support for ::picker-icon may vary, and in some browsers, the icon may not be stylable at all or only partially customizable.

Another practical application is aligning the picker icon within input fields using layout-related properties like padding or margin, which can be particularly useful when integrating with frameworks or custom form designs. For instance, centering the icon vertically in a taller input field may require fine-tuning of these properties.

Syntax

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

Example

HTML

<form>

  <label for="fruit-select">Choose a fruit:</label>

  <select id="fruit-select">

    <option value="">Select one…</option>

    <option value="apple">Apple</option>

    <option value="banana">Banana</option>

    <option value="cherry">Cherry</option>

    <option value="date">Date</option>

  </select>

</form>

CSS

/* Opt in to the new customizable select rendering */

select,

::picker(select) {

  appearance: base-select; /* enable browser‑controlled custom styling */

}



/* Basic styling for the select control */

select {

  padding: 8px 12px;

  font-size: 16px;

  border: 2px solid #ccc;

  border-radius: 6px;

  background: white;

  transition: border-color 0.3s ease;

}



select:hover,

select:focus {

  border-color: #888;

}



/* Style the picker icon (the down arrow) */

select::picker-icon {

  color: #555;             /* change icon color */

  transition: 0.3s rotate; /* animate rotation */

}



/* When the select is open, rotate the icon */

select:open::picker-icon {

  rotate: 180deg;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS ::picker-icon pseudo element. Hover over a browser icon to see the version that first introduced support for this CSS psuedo element.