Carets

The arrows of the pickers, selects, dropdowns, number spinner, calendar and accordion are carets drawn by the stylesheet. They load no image or inline SVG, so a strict Content Security Policy allows them. Each one is an empty element; the accordion draws its caret on your <summary>:

<span class="gui-caret" aria-hidden="true"></span>

The caret takes the color of the text around it and stays visible in forced-colors mode. It points down; gui-caret--up, gui-caret--left and gui-caret--right turn it.

Change every caret

Two tokens change every caret at once:

Token	Default	What it does
--gui-caret-shape	A chevron polygon	The clip-path that cuts the caret out of its box. none shows the whole box.
--gui-caret-image	none	A mask-image that draws the caret from an icon of your own. Set the shape to none with it.

Change the shape with any clip-path value:

:root {
  /* A solid triangle. */
  --gui-caret-shape: polygon(20% 35%, 80% 35%, 50% 70%);
}

Or use your own icon, pointing down. Its color comes from the text, and its transparent parts stay transparent:

:root {
  --gui-caret-image: url('/icons/chevron-down.svg');
  --gui-caret-shape: none;
}

An icon in a data: URL needs img-src data: in your Content Security Policy. A file on your own origin needs only img-src 'self'.

The calendar’s month buttons

The month buttons of the calendars also take prev-month-icon and next-month-icon, which replace their carets with icons.