디자인 시안의 선택창에는 상태별 색상과 여백, 선택 표시가 들어 있다. 기본 <select>만으로는 구현하기 어려워 보인다. 그렇다고 <div>와 JavaScript로 드롭다운을 다시 만들면, 이번에는 키보드 조작과 포커스, 폼 제출까지 직접 챙겨야 한다.
최근 브라우저가 넓히고 있는 선택지는 그 중간에 있다. 실제 <select> 요소를 유지하면서, 펼쳐지는 목록의 모양을 CSS로 꾸미는 방식이다.
Safari는 27.0에서 이 기능을 지원하기 시작했고, 2026년 10월 26일 공개된 27.2에서 선택된 글자의 표시와 목록의 화면 밖 넘침 등을 다듬었다. Chrome에서도 사용할 수 있다. 다만 Firefox 정식 버전까지 포함해 어디서나 동일하게 작동하는 기능은 아직 아니다. WebKit의 Safari 27.2 발표, MDN의 지원 현황
먼저, 평범한 선택창을 그대로 만든다
주문 상태를 고르는 폼이라면 시작점은 익숙한 HTML이다.
1 2 3 4 5 6 7<label for="order-status">주문 상태</label> <select id="order-status" name="status" class="status-select"> <option value="preparing">준비 중</option> <option value="shipping">배송 중</option> <option value="delivered">배송 완료</option> </select>
이 상태만으로도 선택창은 작동한다. 브라우저가 새로운 꾸미기 기능을 지원하지 않더라도 읽을 수 있는 항목과 제출할 값이 남는다.
이제 지원하는 브라우저에서만 기본 꾸미기 모드로 전환한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26@supports (appearance: base-select) { .status-select, .status-select::picker(select) { appearance: base-select; } .status-select { min-width: 12rem; padding: 0.7rem 0.9rem; border: 1px solid #b7c8c5; border-radius: 0.65rem; background: #f5faf8; color: #173d38; } .status-select::picker(select) { padding: 0.35rem; border: 1px solid #b7c8c5; border-radius: 0.65rem; background: #fff; } .status-select option { padding: 0.7rem; } }
핵심은 appearance: base-select를 선택창과 펼쳐지는 목록을 뜻하는 ::picker(select) 양쪽에 지정하는 것이다. 이를 통해 브라우저가 제공하는 새로운 기본 형태를 바탕으로 내부를 꾸밀 수 있다. MDN 구현 안내
여기서는 일부러 옵션 안에 아이콘이나 복잡한 HTML을 넣지 않았다. 첫 적용이라면 색상과 간격만 조정해도 이 기능이 필요한지 판단할 수 있다.
Safari 27.2에서 달라진 부분
이번 업데이트의 흥미로운 점은 새로운 기능 하나를 더 얹었다기보다, 실제 폼에서 거슬리기 쉬운 부분을 다듬었다는 데 있다.
Safari 27.2는 <selectedcontent> 요소를 별도로 사용하지 않아도 선택된 항목의 글자를 꾸밀 수 있도록 ::field-content를 추가했다. 펼쳐진 선택 목록이 화면 밖으로 벗어나는 문제에도 대응했고, 선택창 안의 정렬과 아이콘 표시도 개선했다. WebKit의 변경 사항
다만 ::field-content까지 곧바로 공통 디자인 규칙에 넣기보다, 필요한 브라우저에서의 동작과 지원 범위를 확인하는 편이 안전하다. 위 예제처럼 기본적인 외형부터 적용하면 지원하지 않는 환경에서 무엇이 달라지는지도 파악하기 쉽다.
‘기본 요소니까 접근성 검사는 끝’은 아니다
<select>를 유지하면 일반적인 폼 제출과 선택 값 처리, 키보드 조작 등 브라우저가 제공하는 동작을 활용할 수 있다. 이것이 드롭다운 전체를 직접 만드는 방식과 가장 큰 차이다. Safari 27의 Customizable Select 소개
그렇지만 꾸미기 기능이 접근성 검사를 대신하지는 않는다. 색으로만 상태를 구분하거나, 옵션을 아이콘만으로 채우면 선택지가 무엇을 뜻하는지 알기 어려워진다. 특히 새 기능을 지원하지 않는 브라우저에서는 옵션 안의 복잡한 표시 요소가 제거되고 텍스트만 남을 수 있다. 각 옵션은 텍스트만 읽어도 의미가 통해야 한다. WebKit의 옵션 작성 원칙
기존의 React·Vue 컴포넌트에 새 HTML 구조를 넣을 계획이라면 서버 렌더링과 하이드레이션도 별도로 테스트해야 한다. MDN은 일부 프레임워크에서 이 기능의 HTML 구조를 처리할 때 문제가 생길 수 있다고 안내한다. MDN 주의사항
이번 변화가 모든 커스텀 선택 컴포넌트를 없애준다는 뜻은 아니다. 검색, 다중 선택, 복잡한 옵션 탐색이 필요한 UI라면 요구사항을 따로 검토해야 한다.
하지만 단순한 상태·카테고리 선택창이라면 질문이 달라졌다. “디자인을 맞추려면 드롭다운을 새로 만들어야 하나?”보다 **“기본 <select>를 유지한 채 어디까지 표현할 수 있나?”**를 먼저 확인할 수 있게 된 것이다.