커스터마이즈 가능한 select: 드디어 진짜 <select>에 스타일을

기본 select 요소를 넘어서려면 지금까지 두 가지 나쁜 선택 중 하나를 감수해야 했습니다. 무거운 JavaScript 라이브러리를 쓰거나, 수많은 div 요소를 늘어놓는 것이었죠. 그리고 어느 쪽이든 접근성 구현이 까다로워지기 일쑤였습니다.¹ WWDC 2026에서 Safari 팀은 그 막다른 길에서 벗어나는 출구를 보여 주었습니다. 바로 커스터마이즈 가능한 select입니다. 이는 HTML과 CSS에 추가된 일련의 기능으로, 기존 <select> 요소를 완전히 스타일링할 수 있게 만들면서도 이미 제공하던 시맨틱, 키보드 내비게이션, 스크린 리더 지원은 그대로 유지합니다. Safari 27과 Chrome 135부터는 버튼, 드롭다운 메뉴, 체크 표시, 심지어 화살표까지 스타일을 바꿀 수 있고, option 안에 이미지, 동영상, 이모지를 넣을 수 있습니다.¹

TL;DR

• 커스터마이즈 가능한 select는 HTML과 CSS만으로 진짜 <select> 요소에 스타일을 적용하여, 그동안 개발자들이 손을 뻗던 JavaScript 라이브러리와 div 더미를 대체합니다. 제공은 Safari 27과 Chrome 135부터 시작됩니다.¹
• 옵트인 방법은 appearance: base-select이며, 두 곳에 적용합니다. 먼저 select 자체에 적용하여 버튼 스타일링을 열고, 다음으로 ::picker(select)에 적용하여 네이티브 드롭다운 메뉴에서 옵트아웃합니다.¹
• 새로운 스타일링 가능한 부분들도 함께 제공됩니다. ::picker-icon은 content 속성과 width로 화살표 스타일을 바꾸고, option 요소의 ::checkmark는 같은 방식으로 체크를 교체하며, :open 의사 클래스는 메뉴가 열려 있는 동안 버튼에 스타일을 적용합니다.¹
• option은 어떤 종류의 콘텐츠든 받아들입니다. 이미지, 동영상, 이모지 등입니다. 세션 데모에서는 각 option 안에 SVG와 레이블을 넣고, 드롭다운 전체를 grid-template과 gap을 사용해 CSS 그리드로 배치합니다.¹
• 지금까지 HTML에서 허용되지 않았던, <select>의 첫 번째 자식으로 <button>을 배치하는 방식이 내장 버튼을 대체합니다. 그 안에 들어가는 <selectedcontent> 요소가 선택된 option의 풍부한 콘텐츠를 표시합니다.²
• 점진적 향상은 공짜로 따라옵니다. 지원하지 않는 브라우저는 네이티브 팝업으로 폴백하고, 시맨틱한 select 요소는 어디서나 내장 접근성을 유지합니다.¹

div 수프에서 시맨틱 HTML로 되돌아가기

Safari 엔지니어 Tim이 2:48부터 사진가 포트폴리오 데모에 appearance: base-select를 적용합니다.

세션의 출발점은 <select>가 이미 잘 해내고 있는 것들입니다. 이 요소는 기본적인 접근성을 그대로 제공합니다. option 요소 사이의 키보드 내비게이션과 견고한 스크린 리더 동작을, 외부 라이브러리 없이 말이죠.¹ Apple 플랫폼에서 네이티브 렌더링은 익숙한 풀다운 버튼이며, 플랫폼의 다른 모든 컨트롤과 어울리기 때문에 사용자는 익숙한 방식으로 조작할 수 있습니다.¹

문제는 언제나 디자인이었습니다. 스타일을 입힌 사이트에 네이티브 컨트롤을 떨어뜨리면 어색해 보이고, 결코 자연스럽게 녹아들지 않습니다. 지금까지 해결책은 요소 자체를 완전히 버리고 JavaScript 위젯이나 div 더미로 갈아탄 뒤, 접근성을 손으로 다시 만드는 것이었습니다. 커스터마이즈 가능한 select는 요소를 유지하면서 스타일링은 여러분 손에 넘겨줍니다. 세션은 실제 사진가 포트폴리오 제작을 예로 들어 세 단계로 차근차근 설명합니다. 버튼, 드롭다운 메뉴, 그리고 마지막으로 평범한 텍스트를 넘어서는 콘텐츠입니다.¹

버튼 스타일링: base-select, ::picker-icon, :open

버튼은 메뉴를 표시하기 위해 클릭하는 select의 부분이며, 첫 단계는 단 하나의 선언입니다.

select {
  appearance: base-select;
}

appearance: base-select는 네이티브 렌더링을, 여러분이 바꿀 수 있는 더 작은 기본 스타일 묶음으로 교체합니다.¹ 그 효과는 상속을 통해 즉시 나타납니다. 데모 사이트는 body에 font-family: Gill Sans를 설정해 두었고, 이제 select 버튼은 body 폰트를 상속하여 옆에 있는 레이블과 어울리게 됩니다.¹ 거기서부터 배경, 테두리, 패딩을 다른 어떤 요소와도 똑같이 조정할 수 있습니다.

버튼을 마무리하는 두 개의 새로운 후크가 있습니다. 화살표에는 전용 선택자 ::picker-icon이 있으며, 교체할 글리프를 위한 content 속성과 크기를 정하는 width를 받습니다. :open 의사 클래스는 드롭다운 메뉴가 열려 있는 동안 버튼에 다른 스타일을 적용합니다.

select::picker-icon {
  content: "▼"; /* swap in your own glyph */
  width: 1rem;
}

select:open {
  background: #1d1d1f;
  color: #f5f5f7;
}

select:open::picker-icon {
  color: #f5f5f7; /* arrow matches the text color in the open state */
}

이 결과에 대한 세션의 평가는 이렇습니다. 단 몇 줄의 CSS만으로 사이트의 나머지 부분과 어울리는 select가 완성됩니다.¹

드롭다운 스타일링: ::picker(select)와 ::checkmark

메뉴에도 자체적인 스타일링 가능한 부분들이 딸려 옵니다. 드롭다운 자체는 select 요소의 ::picker(select)로 다루고, 체크는 option 요소의 ::checkmark로 다룹니다.¹ 네이티브 메뉴에서 옵트아웃하려면 appearance: base-select를 한 번 더, 이번에는 picker에 적용해야 합니다.

select::picker(select) {
  appearance: base-select;
  padding: 0.5rem;
  margin-top: 0.25rem;
  border: 1px solid #d2d2d7;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}

깨끗한 백지를 마련한 뒤, 데모는 padding과 margin으로 간격을 잡고, 이어서 드롭다운에 테두리와 box-shadow를 처리합니다.¹ 현재 선택을 강조할 때는 새로운 무언가가 아니라 기존의 :checked 선택자를 사용합니다. 체크된 option을 굵게 만들고 나머지를 회색으로 흐리게 하는 식이죠.¹

option:checked {
  font-weight: bold;
}

option:not(:checked) {
  color: #6e6e73;
}

option::checkmark {
  content: "✓";
  width: 1rem;
}

::checkmark는 ::picker-icon과 정확히 똑같이 작동합니다. content와 width를 설정하면, 기본 체크는 여러분의 디자인에 맞는 어떤 글리프로든 바뀝니다.¹

option 안의 풍부한 콘텐츠를 그리드로 배치하기

더 큰 변화는 <option> 안에 들어가는 내용입니다. 세션은 분명히 말합니다. 어떤 종류의 콘텐츠든 됩니다, 이미지, 동영상, 이모지, 무엇이든 원하는 대로요.¹ 데모는 사진가의 가장 인기 있는 피사체들을 모은 카테고리 브라우저를 만드는데, 각 option 안에 SVG 심볼과 레이블을 넣습니다.

<select>
  <option value="flowers">
    <img src="flowers.svg" alt="">
    Flowers
  </option>
  <!-- more categories -->
</select>

alt가 비어 있는 점에 주목하세요. Tim은 이미지의 alt 텍스트를 의도적으로 비워 둡니다. 그렇게 하지 않으면 스크린 리더에서 “Flowers”라는 레이블이 두 번 읽히기 때문입니다.¹ 작은 디테일이지만 실제 결과로 이어집니다. 풍부한 option도 평범한 option만큼이나 보조 기술에서 그대로 사용할 수 있는 것이죠.

기본 체크 표시를 제거했으므로, 데모는 checked 선택자와 색상 변경을 통해 선택된 option을 강조합니다.¹ 한 가지 문제가 남습니다. 심볼과 레이블을 함께 담은 option은 드롭다운을 매우 길게 만듭니다. 그 해결책은 이미 존재하는 CSS의 재사용입니다. 이제 picker는 평범한 스타일링 대상이기 때문입니다. 그리드 레이아웃이 메뉴 전체를 다시 빚어냅니다.

select::picker(select) {
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr 1fr; /* rows / columns */
  gap: 0.5rem;
}

grid-template이 행과 열의 수를 정의하고 gap이 그리드 셀 사이의 간격을 정의하면서, 드롭다운은 잘 정돈된 카테고리 그리드로 딱 맞춰집니다.¹ 세션은 같은 주제로 화려한 마무리를 선보입니다. 전적으로 커스터마이즈 가능한 select만으로 만든 방사형 색상 선택기입니다.¹

교체 가능한 버튼과 selectedcontent

카테고리 브라우저에는 한 가지 빈틈이 남아 있습니다. SVG 심볼은 option 안에 들어 있지만, 현재 선택을 보여 주는 버튼은 텍스트만 표시한다는 점입니다.¹ 커스터마이즈 가능한 select는 내장 버튼을 교체할 수 있게 하여 이 빈틈을 메웁니다. <button> 요소를 <select>의 첫 번째 자식으로 배치하는 것이죠. select 안에 버튼을 넣는 것은 지금까지 HTML에서 허용되지 않았지만, 이제는 커스텀 콘텐츠를 받아들입니다. 레이블 같은 것, 혹은 바로 이 일을 위해 만들어진 요소 같은 것을요.¹

WebKit의 Safari 27 베타 발표는 그 요소의 이름을 명시합니다. <selectedcontent>입니다. select의 첫 번째 자식 버튼 안에 놓이면, 현재 선택된 option의 콘텐츠를 표시하며 직접 스타일을 적용할 수 있습니다.²

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="everything">
    <img src="everything.svg" alt="">
    Everything
  </option>
  <!-- more categories -->
</select>

이 요소는 선택된 option에 속한 풍부한 콘텐츠를 무엇이든 그대로 비춰 줍니다. 데모에서 “Everything” 레이블 옆에 있는 SVG처럼 말이죠. 그래서 버튼은 마침내 자신이 여는 메뉴와 동일한 시각적 언어를 보여 줍니다.¹²

점진적 향상이 처음부터 내장되어 있다

세션의 마지막 단계는 팀이 소홀히 했다가는 큰코다치는 것입니다. 커스터마이즈 가능한 select를 지원하지 않는 브라우저에서 디자인을 확인하는 일이죠. 그 답은 가장 좋은 의미에서 따분합니다. 점진적 향상이 작동하여 컨트롤은 사용 가능한 상태로 남고, 고객은 네이티브 팝업을 받게 됩니다.¹ select 요소를 재사용한다는 것은 폴백 시나리오가 이미 존재한다는 뜻입니다. 그리고 <select>는 시맨틱한 요소이므로, 내장 접근성 기능은 모든 브라우저에서 살아남습니다.¹

제공 시기는 구체적입니다. Safari 27과 Chrome 135입니다. 이 기능들을 지금 바로 사용해 보려면 Safari Technology Preview 또는 Safari Beta를 다운로드하세요.¹ 세션의 마무리 지침은 실용적입니다. webkit.org에서 데모를 확인하고, 여러분의 사이트에서 우선 간단한 것에 스타일을 입혀 보고, 지원하지 않는 브라우저와 보조 도구로 테스트하고, WebKit의 모범 사례 자료를 읽어 인터페이스가 모두에게 작동하도록 하세요.¹

Safari 팀이 랩에서 추가한 것

WWDC 랩에서 나온 몇 가지가 그림을 완성합니다. 특히 커스터마이즈 가능한 select가 향하는 방향에서 그렇습니다.

주목할 로드맵 항목은 appearance: base인데, 이는 <select>만이 아니라 모든 폼 컨트롤로 일반화된 동일한 옵트인입니다. 이 값은 CSS 스펙에 존재하지만 아직 어디에도 출시되지 않았습니다.³ 랩에서 패널은 이것이 “지금은 출시되지 않는다”고 말했고 나중에 나올 것이라고 했으며, 스펙 논의가 여전히 공개적으로 정리되지 않았다고 했습니다. 패널들은 스타일이 입혀지지 않은 base가 도대체 어떤 모습이어야 하는지를 두고 현장에서 의견이 엇갈렸습니다.⁴ 언급된 디자인 목표는 충분히 명확합니다. 페이지 스타일에서 최대한 상속받고, 레이아웃 마법은 없으며, 엔진 전반에 걸쳐 동일한 base 렌더링 과 동일한 DOM 구조를 갖는 것입니다.⁴

이 역사는 커스터마이즈 가능한 select가 애초에 왜 <select>를 재사용하는지를 설명합니다. 원래 제안은 완전히 새로운 <selectmenu> 요소였습니다. 한 WebKit 표준 엔지니어가 대신 <select>를 재사용하자고 밀어붙였고, 그래서 지원하지 않는 브라우저는 네이티브 폴백을 공짜로 유지합니다. 이것이 바로 위에서 말한 점진적 향상 시나리오입니다.⁴

패널에서 나온 한 가지 확고한 규칙이 있습니다. option에는 항상 텍스트 콘텐츠를 유지하라는 것입니다. 아이콘만 있는 option은 지원하지 않는 브라우저에서 빈 네이티브 팝업으로 렌더링되어, 지원하지 않는 엔진의 사용자를 오도 가도 못하게 만듭니다.⁴

핵심 요약

프런트엔드 개발자를 위해: - 버튼에는 select 요소에 appearance: base-select를, 드롭다운에는 ::picker(select)에 한 번 더 적용하여 옵트인하세요. 그런 다음 배경, 테두리, 패딩, 간격, box-shadow를 다른 어떤 요소와도 똑같이 스타일링하세요.¹ - 화살표는 ::picker-icon으로, 체크는 ::checkmark로 교체합니다. 둘 다 content와 width를 사용합니다. 열린 상태는 :open으로 스타일링하고, 선택 강조에는 기존의 :checked 선택자를 사용하세요.¹ - <option> 안에 진짜 HTML(이미지, 동영상, 이모지)을 넣고, grid-template과 gap 그리드처럼 기존 CSS로 메뉴를 다시 빚으세요. 내장 버튼은 <selectedcontent>를 담은 첫 번째 자식 <button>으로 교체하세요.¹²

접근성을 중시하는 팀을 위해: - 시맨틱한 select는 지원하는 브라우저와 지원하지 않는 브라우저 모두에서 외부 라이브러리 없이 키보드 내비게이션과 스크린 리더 지원을 유지합니다.¹ - option이 이미지와 텍스트 레이블을 모두 담을 때는, 스크린 리더가 레이블을 두 번 읽지 않도록 이미지의 alt 텍스트를 비워 두세요.¹ - 출시 전에 지원하지 않는 브라우저와 보조 도구로 테스트하세요. 세션 자체의 체크리스트에 따른 것입니다.¹

배포를 계획하는 기술 리더를 위해: - 커스터마이즈 가능한 select를 점진적 향상으로 다루세요. Safari 27과 Chrome 135는 커스텀 디자인을 얻고, 나머지는 모두 네이티브 팝업을 얻으며, JavaScript 폴백은 필요하지 않습니다.¹ - Safari Technology Preview 또는 Safari Beta에서 지금 바로 평가하고, 현재 번들에 자리 잡고 있는 드롭다운 라이브러리와 견주어 보세요.¹

FAQ

커스터마이즈 가능한 select란 무엇인가요?

커스터마이즈 가능한 select는 Safari 팀이 WWDC 2026에서 발표하고 Safari 27과 Chrome 135부터 제공하는 일련의 HTML 및 CSS 기능으로, 기존 <select> 요소를 완전히 커스터마이즈할 수 있게 만듭니다. 버튼, 드롭다운 메뉴, 화살표, 체크 표시를 CSS로 스타일링하고 option 안에 풍부한 콘텐츠를 넣으면서도, 요소의 내장 접근성을 유지합니다.¹

커스터마이즈 가능한 select에는 어떻게 옵트인하나요?

appearance: base-select를 두 곳에 적용합니다. 하나는 select 요소 자체로, 네이티브 버튼 렌더링을 더 작은 기본 스타일 묶음으로 교체합니다. 다른 하나는 ::picker(select)로, 드롭다운 메뉴를 네이티브 렌더링에서 옵트아웃시켜 자유롭게 스타일링할 수 있게 합니다.¹

option 요소 안에 이미지나 다른 HTML을 넣을 수 있나요?

네. 세션에서는 option 안에 어떤 종류의 콘텐츠든 넣을 수 있다고 말합니다. 이미지, 동영상, 이모지입니다. 데모는 option마다 SVG와 텍스트 레이블을 사용하며, 스크린 리더가 레이블을 한 번만 읽도록 이미지의 alt 텍스트를 비워 두고, grid-template과 gap을 사용해 메뉴를 CSS 그리드로 배치합니다.¹

selectedcontent 요소란 무엇인가요?

<selectedcontent>는 현재 선택된 option의 풍부한 콘텐츠를 select의 버튼 안에 표시하는 요소입니다. 커스터마이즈 가능한 select는 지금까지 HTML에서 허용되지 않았던 <select>의 첫 번째 자식으로서의 <button>을 허용합니다. 그 버튼 안에 <selectedcontent>를 두면 선택된 option의 콘텐츠, 예를 들어 레이블 옆의 SVG 같은 것을 그대로 비추며, 요소에는 직접 스타일을 적용할 수 있습니다.¹²

커스터마이즈 가능한 select를 지원하지 않는 브라우저에서는 어떻게 되나요?

컨트롤은 우아하게 저하됩니다. 점진적 향상 덕분에 select는 완전히 사용 가능한 상태로 남고, 고객은 네이티브 팝업을 받습니다. 그리고 <select>는 시맨틱한 요소이므로 내장 접근성 기능이 남아 있습니다. 세션은 출시 전에 지원하지 않는 브라우저와 보조 도구로 테스트할 것을 권장합니다.¹

커스터마이즈 가능한 select는 CSS Grid Lanes가 masonry 레이아웃에 대해 하는 것과 똑같은 방식으로 의존성 하나를 삭제하며, 이 짝짓기는 의도적입니다. 세션 315 자체가 시청자를 Grid Lanes 세션으로 안내하며 마무리되고, 데모 사이트는 두 기능을 함께 사용합니다.¹ Apple은 평범한 HTML 요소가 할 수 있는 일을 계속 확장하고 있으며, 이는 Apple 플랫폼의 HTML model 요소에서 다룬 것과 동일한 궤적입니다. 그리고 여러분이 더 이상 출시하지 않게 된 드롭다운 라이브러리 하나하나가 노빌드 선언의 주장을 강화합니다. 전체 시리즈 허브는 Apple Ecosystem Series입니다.

References