Safari 27.2 styles the select text with ::field-content and renames flow-tolerance

You have a <select> with four options: Processing, Shipped, Delivered, Canceled. You've opted into the new customizable rendering, and now you want the chosen value, the text sitting in the closed control, to look different from the option list. Until now that meant changing your markup. In Safari 27.2 it doesn't.

Jen Simmons' post on the WebKit blog, dated 26 October, covers what's in the release. Customizable Select gets a new ::field-content pseudo-element and some cleanup to its UA styles. safe alignment changes for positioned boxes. The Grid Lanes property flow-tolerance is now fit-tolerance. There are also 20 bug fixes. Here are the CSS parts, in order.

Same select, no new element

Customizable Select first landed in Safari 27.0. Its markup lets you put a <button> inside the <select> and drop a <selectedcontent> element into it, which gives you control over what the closed control shows and how it looks. This is the example from the post:

<select id="status">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option>Processing</option>
  <option>Shipped</option>
  <option>Delivered</option>
  <option>Canceled</option>
</select>

The post says plainly that you don't have to write that. The plain version still works:

<select id="status">
  <option>Processing</option>
  <option>Shipped</option>
  <option>Delivered</option>
  <option>Canceled</option>
</select>

In Safari 27.2, ::field-content lets you style the text of the selected option shown on the page without the <selectedcontent> element. If restyling that text was the only reason you added the extra markup, you can keep the plain version. The post doesn't include a ::field-content code sample, so test which declarations it takes in Safari before you build a design on one.

I like this change a lot. Everyone already has the four-<option> select in their codebase, and now it gets a styling hook with no markup change.

Quieter defaults for base-select

Safari 27.2 also adjusts the UA styles for appearance: base-select. The layout-relevant changes:

• The button's contents center vertically more reliably.
• The selected option text now inherits text-overflow from the <select>, so you set it on the <select> and it carries through.
• ::picker-icon is drawn differently so it can have a simpler layout. The bug-fix list adds that the default glyph no longer needs negative margins to line up.
• Spacing now comes from flex: 1 on the button instead of margin-inline-start: auto on ::picker-icon. WebKit says this keeps the picker icon visible even without <selectedcontent>.

If you overrode the spacing around ::picker-icon, open the inspector and check your overrides against the new defaults. The auto margin you were fighting isn't there anymore.

safe holds positioned boxes in place

Before this release, a large select picker could render partly outside the viewport. Safari 27.2 keeps it in view by applying safe alignment, and that fix comes from a broader change to CSS alignment. For absolutely and fixed positioned boxes, safe now keeps the box within its original containing block. You can also now combine the safe and unsafe keywords with normal alignment.

As general background, safe tells the browser to give up on the alignment you asked for when honoring it would push content out of reach. The 27.2 change applies that rule to positioned boxes and their original containing block. The picker is the first place you'll notice it, but any absolutely or fixed positioned box you align with safe gets the same behavior.

Rename it, then turn it up

Grid Lanes shipped in Safari 26.4 last March. The CSS Working Group has since renamed flow-tolerance to fit-tolerance to better describe what it does, and Safari 27.2 uses the new name. The old name keeps working as a deprecated alias for now. WebKit says Safari Web Inspector marks what needs changing.

/* deprecated alias, still accepted for now */
flow-tolerance: 1em;

/* the new name; 1em is the default */
fit-tolerance: 1em;

The property controls how picky the browser is when it places the next item. With no tolerance, the browser picks the column (or row, in the other direction) whose content ends highest on the page. With fit-tolerance, columns within that distance of each other count as tied, and the browser takes the first one.

The part to act on is WebKit's advice to raise it. A higher tolerance keeps consecutive items in neighboring columns instead of bouncing across the page to chase tiny height differences. The post says that makes tabbing through content better, especially for sighted keyboard users who watch focus move from item to item. So most of the time, WebKit says, you should increase the value significantly. How much depends on your content sizes and how much they vary. The 1em default is where you start tuning, not where you stop.

Fixes worth a retest

A few of the 20 bug fixes are worth retesting if you write HTML and CSS. VoiceOver no longer repeats text it already announced when a page re-renders an aria-live region instead of appending to it. An anchor-positioned element inside a modal <dialog> no longer gets laid out offscreen when the page is scrolled. List, table, tree and canvas content is no longer dropped from an accessible name or description built with aria-labelledby or aria-describedby.

Where it runs

Safari 27.2 is available on iOS 27.2, iPadOS 27.2, visionOS 27.2, macOS 27.2 Golden Gate, macOS Tahoe and macOS Sequoia. The post only covers WebKit. On Customizable Select it says implementations across all browsers are being updated to match the standards work, but it gives no status for ::field-content or fit-tolerance in other engines. Check each engine yourself before you depend on either.

For your next select, try deleting the <selectedcontent> you added only to style the text, and style the plain markup with ::field-content instead. For your next Grid Lanes layout, do the find-and-replace, then tab through the page while you raise fit-tolerance.