Safari 27 and Chrome 149 both shipped the new Customizable <select> spec at WWDC26. Designers immediately started using appearance: none to strip native dropdown styling and ship custom UI. Firefox doesn't support the spec yet. When your CSS isn't gated with @supports (appearance: base-select), every Firefox user sees the bare text floating in a styled box — no chevron, no affordance, no accessibility tree the screen reader can use. The fix is a one-line spec query that lets modern browsers light up your custom UI while Firefox falls back to the native OS dropdown. SelectPunk finds every rule that needs the gate.
appearance: none without @supports is a Firefox-shaped trap that every design system shipped this month.When Safari 27 and Chrome 149 shipped the Customizable Select Element spec at WWDC26, designers got something they'd wanted since 1998: a fully styleable native <select>. The catch: you have to ask permission with @supports (appearance: base-select) before your custom shadow DOM rules apply. Skip that gate and you ship code that quietly breaks every Firefox user. The browsers that DO support the spec ignore your custom styling silently (because the syntax for the new spec is different). The browsers that DON'T support it strip the native UI and ignore your custom UI, leaving raw text in a box. The fix is wrap-and-paste, takes 30 seconds per rule, and ships natively without polyfills.
appearance: none — Tailwind UI, shadcn/ui, Radix, Headless UI, every starter template · informal survey June 2026@supports (appearance: base-select) per rule. Wrap the existing styles. Git-reversible. No framework changes. · W3C CSS Basic UIappearance: none on form elements without protection. · checked June 2026PLAIN ENGLISH WWDC26 shipped a Customizable Select Element spec for the first time in browser history. Safari 27 and Chrome 149 implemented it. Firefox didn't. Designers immediately started ripping native dropdown styling off their <select> elements because the modern browsers let them style the shadow DOM directly. Without the @supports gate, Firefox users see naked unstyled text where you intended a beautiful custom dropdown. Your form looks broken to roughly 1 in 30 of your visitors — and you have no idea it's happening because you build on Mac in Safari or Chrome. SelectPunk finds every ungated rule in your codebase and emits the exact @supports wrap that fixes it.
Paste the part of your page where you customize <select> elements — forms, settings panels, filter bars, anywhere you've stripped the OS-native dropdown. We render it in a sandboxed iframe inside your browser, walk every appearance: none rule that touches a <select>, and check whether it's inside an @supports (appearance: base-select) block. Zero upload, zero storage, zero AI. Pure stylesheet inspection.
Your pasted HTML loads into a hidden, script-disabled iframe inside your browser tab. Nothing leaves the page. The iframe is destroyed the moment the audit completes.
We iterate document.styleSheets[i].cssRules, recursing through every @supports and @media block. For each style rule that sets appearance: none (or -webkit-appearance: none) on a selector containing select, we check whether any ancestor wrapper is @supports (appearance: base-select).
For each ungated rule you get the selector, the original rule, and the patched version wrapped in @supports (appearance: base-select) { … }. Copy button included. Git-reversible. Safari 27+ and Chrome 149+ light up your custom UI; Firefox falls back to native OS dropdown rendering. Both groups get a working dropdown.
SelectPunk is the fourth product in the Punk Store. PalettePunk audits color (Display P3 / OKLab). StickyPunk finds position: sticky failures from ancestor overflow: hidden. KeyboardPunk patches mobile inputs hidden by the iOS keyboard. Two more shipping this quarter. The Punk Pass gets you all of them — current and future — for less than the cost of buying three separately.
No subscription. No login wall. No "contact sales." Buy once, own forever, use on every project you ever ship.
@supports gate per rule, all git-reversibleCSS Basic User Interface, "Customizable Select Element" section. Shipped in Safari 27 and Chrome 149 at WWDC26. The feature query is @supports (appearance: base-select). The spec is non-controversial; Firefox hasn't implemented it yet, but they're not opposed.
Yes. Nothing uploads. The pasted HTML loads into a sandboxed iframe inside your tab. We walk document.styleSheets using the standard CSS Object Model. View source — the whole scanner is in /scan.js, vanilla JS, zero dependencies.
<input> and <textarea>?SelectPunk only audits <select> elements because that's where the new spec applies. For form-styling consistency across browsers in general, that's a different audit — let us know if you want a FormPunk product in the queue.
Likely yes within 12 months. The spec is well-designed and Firefox hasn't opposed it. That doesn't change the urgency: today's Firefox users see naked dropdowns today, and your customer didn't open Firefox to test before they switched browsers to write a complaint email.
No. @supports (appearance: base-select) evaluates to false in every browser that doesn't support the spec, so the wrapped rules don't apply. Firefox 130, Safari 16, Chrome 100 — all see the native dropdown, untouched. Pure additive enhancement.
Yes. Same Radio Art LLC, same engineering, same lifetime-license model, same "we publish the methodology" doctrine. Punk Pass pays for itself by your second Punk.