Customizable Select

TL;DR

Customizable Select는 semantic HTML <select>를 유지한 채 CSS와 일부 새 HTML 구조로 버튼, picker, option content를 스타일링하는 웹 플랫폼 기능이다.

WWDC26 세션은 appearance: base-select, ::picker-icon, ::picker(select), ::checkmark, :open, :checked를 사용해 select 버튼과 드롭다운을 사이트 디자인에 맞추는 흐름을 보여준다 [1] [2].
option 내부에는 SVG, 이미지, 레이블 같은 rich content를 둘 수 있고, 발표자는 장식성 이미지의 빈 alt 처리처럼 screen reader 중복 낭독을 피하는 접근성 처리를 함께 설명한다 [1] [2].
<select>의 첫 자식으로 <button>을 두고 그 안에 <selectedcontent>를 넣으면 선택된 option의 rich content가 닫힌 버튼에도 표시된다 [1] [3].
미지원 브라우저에서는 semantic <select>가 native popup으로 남기 때문에 progressive enhancement가 핵심 배포 전략이며, 발표자는 비지원 브라우저와 assistive tools 테스트를 권장한다 [1] [2].