이제 <select> 요소를 CSS로 맞춤설정할 수 있습니다.

Adam Argyle

게시일: 2025년 3월 24일

Chrome 135부터 웹 개발자와 디자이너는 웹에서 접근 가능하고 표준화되었으며 CSS 스타일을 지정할 수 있는 <select> 요소를 사용할 수 있습니다. 이 작업은 수년에 걸쳐 수많은 엔지니어링 및 공동 사양 작업으로 이루어졌으며, 그 결과 오래된 브라우저에서 작동하지 않는 일이 없는 매우 풍부하고 강력한 구성요소가 탄생했습니다.

다음은 이러한 새로운 기능을 사용하여 맞춤설정된 선택 항목을 보여주는 동영상입니다.

우나, Brecht, 애덤의 데모가 포함되어 있습니다.

자세히 살펴보셨다면 우나의 커뮤니티 의견 요청 이후 몇 가지 사양 이름과 기능이 변경되었음을 알 수 있습니다. 다행히도 이 게시물을 참고하여 작업했고 변경사항이 궁금하다면 Una의 게시물도 확인해 보세요.

자세한 내용이 담긴 맞춤설정 가능한 선택에 관한 새로운 MDN 문서도 있습니다.

appearance: base-select 소개

<select> 요소를 새로운 구성 가능하고 스타일 지정 가능한 상태로 전환하는 새로운 CSS 속성 appearance: base-select. 일반적으로 '기본' 스타일이라고 합니다.

.custom-select {
  &, &::picker(select) {
    appearance: base-select;    
  }
}

base-select를 사용하면 다음과 같은 여러 새로운 기능과 동작이 잠금 해제됩니다.

  • <select> 내부 콘텐츠의 브라우저 HTML 파서를 변경합니다.
  • <select>의 렌더링된 내부 요소를 변경합니다.
  • <select>의 새로운 내부 파트와 상태를 노출합니다.
  • 맞춤설정에 최적화된 새로운 최소 디자인
  • 표시된 옵션은 팝오버와 같이 최상위 레이어에 있습니다.
  • anchor()로 배치된 옵션이 표시됩니다.

base-select를 사용하면 다음과 같은 여러 기능과 동작이 손실됩니다.

  • <select>가 브라우저 창 외부에서 렌더링되지 않습니다.
  • 기본 제공 모바일 운영체제 구성요소를 트리거하지 않습니다.
  • <select>이 가장 긴 <option>의 너비를 가져오지 않습니다.

이제 <select>에 리치 HTML 콘텐츠를 포함할 수 있습니다.

이전에는 <select>를 맞춤설정할 수 없었습니다. 이미지나 SVG와 같은 항목을 <option> 요소에 넣으면 브라우저에서 이를 무시했습니다.

다음 HTML을 고려해 보세요. 브라우저에서는 작성한 대로 읽습니다.

<select class="custom-select">
  <option>
    <svg aria-hidden>…</svg>
    <span>HTML</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>CSS</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>JavaScript</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>WASM</span>
  </option>
</select>

하지만 사용된 DOM에는 <svg>가 포함되지 않습니다.

<select class="custom-select">
  <option>
    <span>HTML</span>
  </option>
  <option>
    <span>CSS</span>
  </option>
  <option>
    <span>JavaScript</span>
  </option>
  <option>
    <span>WASM</span>
  </option>
</select>

다음은 Chrome, Safari, Firefox가 위의 HTML을 렌더링한 결과입니다 (왼쪽부터). 브라우저가 appearance: base-select를 지원하면 SVG가 옵션에 표시되고, 그렇지 않으면 표시되지 않습니다.

Chrome, Safari, Firefox에서 SVG가 포함된 select를 렌더링하는 모습 Chrome은 이미지를 표시하고 Safari와 Firefox는 이미지가 없는 것처럼 렌더링합니다.
이 CodePen에서 사용해 보세요.

파서 변경으로 인해 맞춤설정 가능한 선택으로 기존 웹사이트가 깨질 위험이 있습니다. Chrome에는 긴급한 상황에서 기능을 사용 중지해야 하는 경우를 대비하여 Finch 실험 뒤에 기능이 있습니다. 상황이 원활하게 진행되면 실험이 종료되고 코드가 소스에 영구적으로 제공됩니다.

완전히 맞춤설정 가능

base-select의 모든 부분을 교체하고 맞춤설정하고 애니메이션을 적용할 수 있습니다. 모든 새로운 기능을 사용하여 인지도가 높고 의미 있는 선택 환경을 만드는 데모가 있습니다.

선택 요소의 네 가지 다른 표현이 표시되어 있습니다. 첫 번째에는 녹색 상태 표시기 점이 있으며 라벨은 &#39;사용&#39;입니다. 다음은 옵션 옆에 아바타가 표시됩니다. 세 번째는 선택에 내장된 맞춤 라벨이 있는 색상 공간 선택 도구입니다. 마지막 옵션을 사용하면 초안 또는 게시된 상태를 선택할 수 있습니다.
이 CodePen에서 사용해 보세요.

이 게시물 끝에 있는 리소스 섹션에서 더 많은 예를 확인할 수 있습니다.

변경되지 않은 JavaScript 인터페이스

<select> 요소와의 기존 JavaScript 상호작용에는 위험이 없습니다.

하지만 <option> 요소에 리치 HTML을 추가하기 시작하는 경우 브라우저에서 여전히 이미지와 SVG를 파싱하고 무시하므로 선택한 값을 테스트해야 합니다. 하지만 선택된 콘텐츠 문자열을 결정하는 로직이 변경되었으므로 옵션에 따라 조정해야 할 수도 있습니다.

<option>에서 value 속성을 사용하는 경우 걱정하지 않으셔도 됩니다.

리소스

Chrome이 base-select를 처음으로 구현했지만 모든 브라우저가 사양에 참여했으며 아직 완료되지 않은 '기본' 요소가 더 있습니다. 이것은 시작에 불과합니다.

선택한 요소를 맞춤설정하는 방법에 관한 안내, 예시, 리소스가 계속 추가될 예정이니 기대해 주세요. 그때까지 다음 링크에서 자세한 내용을 확인하세요.

이 프로젝트를 실현하는 데 참여해 주신 모든 분께 특별한 감사를 드립니다.