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

Adam Argyle

게시일: 2025년 3월 24일

Chrome 135부터 웹 개발자와 디자이너는 웹에서 액세스 가능하고 표준화되었으며 CSS 스타일을 지정할 수 있는 <select> 요소를 사용할 수 있습니다. 수년간의 개발과 수많은 시간의 엔지니어링 및 공동작업 사양 작업 끝에 이전 브라우저에서 작동하지 않는 매우 풍부하고 강력한 구성요소가 탄생했습니다.

다음은 이러한 새로운 기능을 사용하여 맞춤 선택을 사용하는 동영상입니다.

Una, Brecht, Adam의 데모를 소개합니다.

Una의 커뮤니티 의견 요청 이후 몇 가지 사양 이름과 기능이 변경되었음을 잘 알고 계실 것입니다. 이 게시물을 참고하여 작업한 경우 변경된 사항에 관심이 있다면 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가 포함된 선택을 렌더링하는 모습. Chrome에서는 이미지가 표시되고 Safari 및 Firefox에서는 이미지가 없는 것처럼 렌더링됩니다.
이 Codepen에서 사용해 보세요.

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

완전히 맞춤설정 가능

base-select의 모든 부분은 교체, 맞춤설정, 애니메이션 처리할 수 있습니다. 다음은 모든 새로운 기능을 사용하여 눈에 띄고 의미 있는 선택 환경을 만드는 데모입니다.

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

이 게시물 끝에 있는 리소스 섹션에서 더 많은 예시를 확인하세요.

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

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

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

<option>에서 value 속성을 사용하는 경우 걱정할 필요가 없습니다.

리소스

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

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

이 기쁜 소식을 함께 만들어 주신 모든 분들께 감사드립니다.