브랜드 셀렉트 스타일링

웹 기능: 맞춤설정 가능한 <select>

맞춤설정 가능한 select API는 선언적이고 CSS 기반의 방식으로 <select> 요소의 스타일을 지정하여 브랜드의 디자인 시스템과 완벽하게 일치시킵니다. appearance: base-select를 선택하면 select 요소의 내부 shadow DOM에 액세스할 수 있으므로 표준 CSS 속성을 사용하여 버튼, 옵션 선택 도구 목록, 화살표 아이콘, 체크표시 표시기를 스타일 지정할 수 있습니다.

이전에는 완전히 브랜딩된 선택 요소를 구현하려면 JavaScript를 사용하여 컨트롤을 처음부터 다시 빌드해야 했으며, 이로 인해 접근성, 키보드 탐색, 네이티브 양식 통합이 손상되는 경우가 많았습니다. appearance: base-select를 사용하면 브라우저에서 포커스 관리, 최상위 레이어 렌더링, 접근성 바인딩을 처리하는 동안 맞춤 디자인을 사용할 수 있습니다.

구현 방법

브랜드 선택 스타일을 구현하려면 다음 단계를 따르세요.

  1. 맞춤설정 선택: appearance: base-select를 <select> 요소와 ::picker(select) 가상 요소 (옵션의 드롭다운 목록을 타겟팅함)에 모두 적용합니다.
  2. 맞춤 버튼 구조화 (선택사항): <select> 내에 <button> 요소를 직접 정의하여 기본 트리거를 대체합니다. 이 버튼 내의 <selectedcontent> 요소를 사용하여 현재 선택된 옵션의 텍스트 또는 콘텐츠를 나타냅니다.
  3. 선택 도구 목록 스타일 지정: ::picker(select) 가상 요소를 사용하여 드롭다운 목록에 서체, 배경 색상, 테두리, 그림자를 적용합니다. 브라우저는 이를 최상위 레이어에서 렌더링하므로 z-index 충돌은 더 이상 발생하지 않습니다.
  4. 내부 아이콘 스타일 지정:
    • select::picker-icon를 사용하여 화살표 아이콘의 스타일을 지정하거나 교체합니다.
    • option::checkmark를 사용하여 활성 옵션 옆에 있는 체크표시 표시기의 스타일을 지정합니다.
  5. 스타일 옵션: 마우스 오버 상태, 패딩, 레이아웃을 위해 <option> 요소에 스타일을 적용합니다.

코드 예시: 브랜드 택배 선택

다음 예는 특정 'parcel' 브랜드 미학에 맞게 고정 폭 글꼴과 파선 테두리로 스타일이 지정된 맞춤 선택을 보여줍니다.

/* Enable customization for the select and its picker */
.brand-select,
.brand-select::picker(select) {
  appearance: base-select;
}

/* Style the visible trigger button */
.brand-select {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  color: #8b4513;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.75rem;
  font-size: 1rem;
  cursor: pointer;
}

/* Style the dropdown options list */
.brand-select::picker(select) {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.5rem;
}

/* Customize internal part colors to match text */
.brand-select::picker-icon {
  color: #8b4513;
}

.brand-select option::checkmark {
  color: #8b4513;
}

/* Style individual options and hover effects */
.brand-select option {
  padding: 0.5rem;
  border-radius: 4px;
  color: #8b4513;
  cursor: pointer;
}

.brand-select option:hover {
  background-color: #fdf5e6;
}

<label for="preferences">Select shipping preference</label>
<select class="brand-select" id="preferences" name="preferences">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="standard">Standard Shipping</option>
  <option value="express" selected>Express Shipping</option>
  <option value="overnight">Overnight Delivery</option>
</select>

전략적 구현 및 권장사항

  • 표준 크로스 브라우저 선택 재정의로는 달성할 수 없는 모든 양식 컨트롤에서 디자인 시스템에 높은 충실도와 시각적 일관성이 필요한 경우 appearance: base-select를 사용합니다.
  • 운영체제의 기본 선택 도구 환경 (예: iOS 기기의 표준 스크롤 휠 선택 도구)을 사용하는 경우 이 옵션을 사용하지 마세요. base-select을(를) 선택하면 네이티브 모바일 UI 컨트롤이 선택 해제되고 웹 렌더링 최상위 레이어 메뉴가 사용됩니다.
  • 색상 대비가 WCAG 표준을 충족하는지 확인합니다. 맞춤설정 가능한 선택 도구를 사용하면 임시 색상을 설정할 수 있지만, 맞춤 배경에서 텍스트를 읽을 수 있도록 유지하는 것은 사용자의 책임입니다.
  • 레이아웃 동작을 테스트합니다. appearance: base-select를 설정하면 가장 긴 옵션 너비를 기준으로 선택 항목의 크기를 조정하는 기본 브라우저 동작이 삭제됩니다. 레이아웃 변경을 방지하려면 고정 너비를 설정하거나 flex/grid 제약 조건을 사용해야 할 수 있습니다.
  • <select>에 name 속성과 연결된 <label>가 있는지 확인합니다. 이렇게 하면 맞춤 UI를 사용하더라도 스크린 리더가 구성요소에 액세스할 수 있고 표준 양식 제출이 올바르게 작동합니다.
  • 옵션에 표준 value 속성을 사용하여 양식 제출이 이전과 동일하게 작동하도록 합니다.

대체 전략

맞춤설정 가능한 <select>의 대체 및 브라우저 지원

아직 appearance: base-select를 지원하지 않는 브라우저의 경우 <select> 요소가 표준 운영체제 드롭다운으로 원활하게 다운그레이드됩니다.

  • 텍스트가 아닌 콘텐츠 무시: 이전 브라우저는 <option> 태그 내의 HTML 태그 (예: <svg> 또는 <div>)를 제거하고 텍스트 노드만 렌더링합니다. <option>의 텍스트 콘텐츠가 그 자체로 읽기 쉽고 의미가 있는지 확인합니다.
  • HTML 구조 처리: 표준 파서는 <select> 내의 <button> 및 <selectedcontent> 태그를 무시하거나 잘못된 것으로 처리할 수 있습니다. 표준 텍스트를 읽을 수 있는 대체로 간주하는 경우 점진적 개선을 위해 무거운 JavaScript 폴리필이 반드시 필요한 것은 아닙니다.
document.addEventListener("DOMContentLoaded", () => {
  // Check if browser supports base-select value
  if (!CSS.supports("appearance", "base-select")) {
    // Custom select overrides are not supported natively.
  }
});