--- title: The golden rule of Customizable Select | daily.dev description: Customizable select is arriving in Safari 27, enabling full visual control over native `` elements without JavaScript. The WebKit team outlines one... canonical: https://daily.dev/posts/the-golden-rule-of-customizable-select-ovcvnr5yr twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: The golden rule of Customizable Select | daily.dev og:description: Customizable select is arriving in Safari 27, enabling full visual control over native `` elements without JavaScript. The WebKit team outlines one... og:url: https://daily.dev/posts/the-golden-rule-of-customizable-select-ovcvnr5yr og:image: https://api.daily.dev/og/posts/OVcVNr5YR.png og:image:alt: The golden rule of Customizable Select og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # The golden rule of Customizable Select **[WebKit](https://daily.dev/sources/webkit)** · 4 min read · 3 upvotes · 0 comments ## Summary Customizable select is arriving in Safari 27, enabling full visual control over native `` elements without JavaScript. The WebKit team outlines one essential rule: always include text content or accessible text attributes in option elements. Omitting text in favor of icons or swatches breaks UX for users who can't interpret icons, makes options inaccessible to screen readers and braille displays, and renders dropdowns empty in browsers that don't yet support the feature. The recommended approach is to keep text as a baseline — even if visually hidden — and treat icons, swatches, and illustrations as enhancements layered on top. Using `@supports (appearance: base-select)` ensures graceful fallback in unsupported browsers. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What is customizable select and when is it coming to Safari? Customizable select is a new web platform feature arriving in Safari 27 that lets developers fully control the appearance of elements, including custom arrows, option layouts, color swatches, and icons, without JavaScript libraries or nested div-based fake dropdowns. Because it remains a native control, keyboard navigation and accessibility semantics are preserved automatically. _Developers planning select UI redesigns can track browser support changes like this one on daily.dev._ ### How do I make icon-only select options accessible for screen readers? Always keep text content or accessible text attributes on option elements, even if visually hidden with a class like .visually-hidden, since hidden text remains in the accessibility tree for screen readers, braille displays, and speech recognition tools. For icons used as img elements, add alt or aria-label, or mark them decorative with alt="" and let the label carry meaning. _Teams shipping accessible dropdown UI can keep accessibility fixes like this in view via daily.dev._ ### How does customizable select fall back in browsers that don't support it yet? Browsers without support for the appearance: base-select CSS feature render the platform-native select element as a fallback, which works correctly only if option text remains present. Wrapping visual enhancements in an @supports (appearance: base-select) query and keeping plain text as the baseline ensures options still make sense when CSS fails to load or isn't supported. _Anyone building progressive enhancement into new CSS features can follow browser support shifts on daily.dev._ ## Similar posts on daily.dev - [The Element: Stop Using JavaScript Dropdown Libraries](https://daily.dev/posts/the-selectmenu-element-stop-using-javascript-dropdown-libraries-22c9sm7x7) · SitePoint · 22 upvotes · 0 comments - [Nice Select · February 3, 2026](https://daily.dev/posts/nice-select-february-3-2026-d8jdnzuo9) · Adam Argyle · 3 upvotes · 0 comments - [Abusing Customizable Selects](https://daily.dev/posts/abusing-customizable-selects-hyfhou2vz) · CSS-Tricks · 14 upvotes · 1 comments - [News from WWDC26: WebKit in Safari 27 beta](https://daily.dev/posts/news-from-wwdc26-webkit-in-safari-27-beta-cz81svuy5) · WebKit · 12 upvotes · 0 comments --- Tags: [#html](https://daily.dev/tags/html), [#accessibility](https://daily.dev/tags/accessibility), [#safari](https://daily.dev/tags/safari) [View this post on daily.dev](https://daily.dev/posts/the-golden-rule-of-customizable-select-ovcvnr5yr) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"The golden rule of Customizable Select","url":"https://daily.dev/posts/the-golden-rule-of-customizable-select-ovcvnr5yr","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/the-golden-rule-of-customizable-select-ovcvnr5yr"},"datePublished":"2026-06-15T21:21:30.344Z","dateModified":"2026-09-13T19:35:37.444Z","description":"Customizable select is arriving in Safari 27, enabling full visual control over native `\u003cselect\u003e` elements without JavaScript. The WebKit team outlines one...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/3da1a5b84a48fd7daf9ef9905931e248?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/3da1a5b84a48fd7daf9ef9905931e248?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"WebKit","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"WebKit","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/webkit","url":"https://daily.dev/sources/webkit"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/the-golden-rule-of-customizable-select-ovcvnr5yr","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"html,accessibility,safari","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"WebKit","item":"https://daily.dev/sources/webkit"},{"@type":"ListItem","position":3,"name":"The golden rule of Customizable Select"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/the-golden-rule-of-customizable-select-ovcvnr5yr#faq","mainEntity":[{"@type":"Question","name":"What is customizable select and when is it coming to Safari?","acceptedAnswer":{"@type":"Answer","text":"Customizable select is a new web platform feature arriving in Safari 27 that lets developers fully control the appearance of \u003cselect\u003e elements, including custom arrows, option layouts, color swatches, and icons, without JavaScript libraries or nested div-based fake dropdowns. Because it remains a native control, keyboard navigation and accessibility semantics are preserved automatically. Developers planning select UI redesigns can track browser support changes like this one on daily.dev."}},{"@type":"Question","name":"How do I make icon-only select options accessible for screen readers?","acceptedAnswer":{"@type":"Answer","text":"Always keep text content or accessible text attributes on option elements, even if visually hidden with a class like .visually-hidden, since hidden text remains in the accessibility tree for screen readers, braille displays, and speech recognition tools. For icons used as img elements, add alt or aria-label, or mark them decorative with alt=\"\" and let the label carry meaning. Teams shipping accessible dropdown UI can keep accessibility fixes like this in view via daily.dev."}},{"@type":"Question","name":"How does customizable select fall back in browsers that don't support it yet?","acceptedAnswer":{"@type":"Answer","text":"Browsers without support for the appearance: base-select CSS feature render the platform-native select element as a fallback, which works correctly only if option text remains present. Wrapping visual enhancements in an @supports (appearance: base-select) query and keeping plain text as the baseline ensures options still make sense when CSS fails to load or isn't supported. Anyone building progressive enhancement into new CSS features can follow browser support shifts on daily.dev."}}]} ```