1 link tagged with all of: safari + ui-components + progressive-enhancement + accessibility + customizable-select
Links
Safari 27’s customizable select lets you fully style <select> controls without JavaScript, but you must include text or accessible labels for each option. Skipping text breaks keyboard navigation, screen readers, and fallbacks in unsupported browsers—icons or swatches must supplement, not replace, option text.
- Safari 27's customizable select allows full CSS styling of dropdowns while keeping native keyboard/accessibility behavior, but only if every option retains real text or an aria-label.
- Icon-only options (e.g., a hummingbird icon with no label) leave screen readers silent and sighted users guessing, since nothing conveys which option is selected or what it means.
- If CSS fails or a browser lacks support, the control falls back to a default select—so text-less options degrade into a list of blank entries.
- Best practice: wrap custom styles in @supports(appearance: base-select), design with plain text as the foundation, and add icons/swatches as supplements—visually hidden if needed—never as replacements for text.
safari
customizable-select
accessibility
progressive-enhancement
ui-components