Safari 27.2's ::field-content Lets You Style the Selected Option in a Customisable Select

Customisable select elements let you style a dropdown properly for the first time, rather than replacing it with a pile of JavaScript. Safari 27.2 adds a small piece that closes a real gap. According to WebKit's feature post, the new ::field-content pseudo-element lets you style the text of the selected option, the part shown in the closed control.

That matters because the closed state is where most of the design lives. The brand-coloured box, the arrow and the label are what people see ninety-nine percent of the time. Until now, getting the displayed text to match the rest of a form could mean awkward workarounds.

Our advice is to adopt it as an enhancement. Build the select with sensible default styling that works everywhere, then add ::field-content rules for browsers that support it. If the pseudo-element is missing, the select still works and looks acceptable, so nothing breaks.

The same release notes mention that safe alignment now keeps large select pickers inside the viewport, which helps on small screens. Test both on a real phone, because select menus behave differently with touch, and check keyboard use as well. Native form controls give you accessibility for free, and it is worth keeping that benefit.