selectlist 요소

<select> 요소는 모양을 지정할 수 없는 몇 안 되는 폼 컨트롤 중 하나입니다. 사용자 지정 테두리, 글꼴, 옵션 스타일 등 적용된 모든 CSS 규칙을 브라우저가 무시하므로, 스타일이 지정된 옵션을 사용하기 위해 네이티브 동작을 그대로 복제하는 "사용자 지정 드롭다운" 라이브러리가 수천 개나 생겨났습니다.

<selectlist>(또는 <selectmenu>로도 표시됨)는 <select>를 스타일 지정 가능한 방식으로 대체하도록 설계된 네이티브 HTML 요소입니다. 버튼 트리거와 옵션 목록이라는 동일한 개념적 모델을 사용하지만, 모든 부분을 CSS로 사용자 지정할 수 있습니다.

selectlist는 버튼(닫힌 상태의 트리거), 목록 상자(열린 드롭다운), 옵션을 노출합니다. CSS 의사 요소(::part(button), ::part(listbox))를 사용하면 네이티브 동작에 영향을 주지 않고 각각의 스타일을 지정할 수 있습니다.

selectlist 내부의 옵션에는 텍스트뿐 아니라 아이콘, 설명, 사용자 지정 레이아웃 등 임의의 콘텐츠를 포함할 수 있습니다. 브라우저는 선택 로직, 키보드 탐색, 포커스 관리를 계속 처리하고, 개발자는 모양을 자유롭게 제어합니다.

selectlist는 <select>의 장점을 모두 유지합니다. 키보드 탐색(화살표 키, 입력 검색), 화면 읽기 프로그램 알림, 폼 참여, 포커스 관리가 그대로 제공됩니다. 접근 가능한 동작을 물려받고 그 위에 UI 스타일을 지정할 수 있습니다.

트리거용 슬롯을 제공하세요. <button slot="button">Choose fruit <svg>...</svg></button>처럼 작성합니다. 버튼은 개발자가 직접 설계할 수 있으므로 네이티브 삼각형을 사용자 지정 아이콘으로 바꾸고, 레이블을 추가하거나 색상을 변경할 수 있습니다. 브라우저는 계속 열기와 닫기를 처리합니다.

selectlist는 select와 마찬가지로 폼 제출에 참여합니다. name 특성과 value를 가지며 폼과 함께 제출됩니다. 서버 측 처리도 동일합니다. 대부분의 select 사용 사례에서 마크업 수준으로 바로 대체할 수 있습니다.

selectlist는 초기 단계의 기능입니다. 2026년 현재 Chromium 기반 브라우저에서 플래그를 사용하거나 제한된 형태로 제공되고 있습니다. Firefox와 Safari는 아직 지원하지 않습니다. 실제 환경에서 사용하려면 지원하지 않는 브라우저를 위해 일반 <select>로 대체하는 방식이 필요합니다.

네이티브 동작과 일치하면서 완전한 접근성을 갖춘 사용자 지정 드롭다운을 폴리필하는 일은 어렵습니다. 포커스 가두기, 키보드 탐색, 화면 읽기 프로그램 통합, 폼 참여를 모두 처리해야 하기 때문입니다. Downshift, Combobox, react-aria와 같은 라이브러리는 수천 줄의 코드로 이 작업을 수행합니다. selectlist는 이 모든 것을 하나의 요소로 대체합니다.

내부 앱이나 크로미엄 전용 배포라면, 지금 선택 목록을 사용하면 코드가 크게 줄어듭니다. 폭넓은 사용자를 대상으로 하는 공개 사이트라면 파이어폭스와 사파리가 지원할 때까지 기다리거나, 지원되는 환경에서는 선택 목록을 사용하고 다른 환경에서는 사용자 지정 리액트/뷰 드롭다운으로 대체하는 래퍼 라이브러리를 사용하십시오.

선택 목록이 모든 곳에 제공되면, 사용자 지정 드롭다운 라이브러리 중 상당수가 더 이상 사용되지 않도록 지정되거나 기본 요소를 감싸는 얇은 래퍼로 바뀌는 흐름이 나타날 것입니다. 표준화 과정을 지켜보십시오. 이 프로그래밍 인터페이스는 여러 차례 수정되었으며 최종 표준화 전까지 계속 발전할 수 있습니다.

이제 디자이너는 “디자인은 이렇게 되어 있지만 브라우저에서는 드롭다운이 다르게 보입니다”와 같은 단서 없이 픽셀 단위로 정확한 드롭다운을 지정할 수 있습니다. 선택 목록은 디자인 시안과 실제 제공되는 HTML 사이에 오랫동안 존재해 온 시각적 불일치 중 하나를 없애 줍니다.

선택 목록 요소가 중요한 이유는 무엇인가요? 기본 요소의 어떤 한계를 해결하나요?

요약

선택 목록(선택 메뉴라고도 함)은 새롭게 등장한 기본 HTML 요소로,

의 기본 제공 동작(키보드, 화면 낭독기, 양식 참여)과 버튼, 목록 상자, 옵션을 CSS로 자유롭게 사용자 지정하는 기능을 결합합니다. 현재는 플래그를 활성화한 크로미엄에서 제공됩니다. 모든 브라우저에서 표준화되면, 사용자 지정 드롭다운 라이브러리 생태계의 상당 부분을 하나의 기본 구성 요소로 대체할 것입니다.