The <select> and <input type="date"> controls render the browser's own arrow and calendar glyph, so the chevrons do not match anything else in the interface and change shape per browser and per operating system.
Measured on training.lsu.stacksjs.com/schedule, the Location and Class Type filters and the date field:
select appearance: auto -webkit-appearance: auto background-image: none padding-right: 14px
input[type=date] appearance: autoAll three carry the shared input class, which styles the box (border, radius, background, spacing) but never neutralises the native control affordance. With appearance: auto and no background-image, what is drawn on the right is whatever the browser draws, inside a box the design system styled.
The same shows up in the Athlete Profile form, where the Sport, Gender and Fitness Level selects and the Date of Birth field all draw native glyphs.
What it should do
Either of the usual two, applied in the shared input class rather than per field:
appearance: noneon selects plus a chevron the design system owns, and padding on the trailing side to clear it. The codebase already uses Iconify (i-lucide-chevron-downand friends), so it would match the rest of the interface and the dark theme.- Or a custom control for both, if the date field is also meant to be themed, since
input[type=date]cannot be fully styled across browsers.
Worth doing in one place: the input class is shared, so every select and date field in the app changes together.