CSS로 꾸민 select, 구형 브라우저에서도 선택지를 읽게 하려면

아이콘이 사라져도 항목 이름은 남아야 한다

색상 견본이나 아이콘으로 select를 꾸밀 때 가장 먼저 남겨야 할 것은 option 안의 실제 텍스트다. 커스텀 선택 상자를 지원하지 않는 브라우저는 기본 선택 상자로 돌아간다. 이때 장식만 있고 글자가 없으면 선택지가 비어 보일 수 있다. WebKit의 구현 가이드도 텍스트를 기본으로 두고 시각 요소를 추가하도록 설명한다.

Safari 27은 기본 HTML select의 버튼과 펼쳐지는 목록을 CSS로 꾸미는 기능을 지원한다. 제품 색상이나 요금제 선택을 위해 별도 JavaScript 위젯을 만드는 대신, 원래 선택 상자의 동작을 활용할 수 있는 범위가 넓어졌다. 다만 예쁘게 보이는 화면과 선택지의 의미가 전달되는 화면은 함께 만들어야 한다.

기본 선택 상자 위에 스타일을 더한다

아래는 의류 사이즈를 고르는 설명용 예제다. 각 항목은 읽을 수 있는 이름과 전송할 값을 갖는다. label은 선택 상자가 무엇을 고르는 입력인지 알려 준다.

<label for="size">사이즈</label>
<select id="size" name="size" class="size">
  <button><selectedcontent></selectedcontent></button>
  <option value="s">작게</option>
  <option value="m">보통</option>
  <option value="l">크게</option>
</select>

MDN의 커스텀 select 가이드에 따르면 selectedcontent는 선택된 option의 내용을 버튼 안에 복제한다. 선택할 때마다 표시 문구를 바꾸는 JavaScript를 따로 작성할 필요가 없다.

@supports (appearance: base-select) {
  select.size,
  select.size::picker(select) {
    appearance: base-select;
    border: 1px solid #64748b;
    border-radius: 0.5rem;
    padding: 0.5rem;
  }
}

select.size는 닫힌 입력 부분, select.size::picker(select)는 펼쳐지는 목록을 대상으로 한다. 둘 다 base-select를 적용해야 목록까지 같은 방식으로 꾸밀 수 있다. 기능을 지원하는 환경에서만 이 CSS가 적용되도록 @supports 안에 넣었다.

브랜드 색을 추가하려면 글자 옆에 장식용 요소를 두는 식으로 확장할 수 있다. 색상 이름을 없애고 색상 견본만 남기는 변경은 피해야 한다. 빨강과 파랑을 구분하는 데에도 텍스트가 직접적인 선택 기준이 된다.

보이는 이름과 서버로 보낼 값은 분리할 수 있다

예제에서 사용자는 ‘보통’을 보지만 폼의 해당 입력 값은 m이다. option의 value 속성을 명시하면 표시 이름을 수정해도 전송 값은 그대로 둘 수 있다. value를 생략하면 option의 텍스트가 값으로 쓰인다.

따라서 제품 코드나 기존 API 값이 정해져 있다면 표시 문구를 꾸미기 전에 value를 명시하는 편이 좋다. 선택한 항목의 외형을 복제하는 selectedcontent가 서버의 데이터 규칙까지 대신하지는 않는다.

구형 브라우저와 모바일은 따로 본다

Safari 27 출시 노트는 커스텀 select 지원을 포함한다. Chrome은 135부터 이 기능을 제공했다. 지원하지 않는 브라우저에서는 ‘작게·보통·크게’를 기본 선택 상자로 표시한다.

모바일에서도 예전과 같은 선택 창이 뜰 것이라고 생각하면 안 된다. base-select의 표시 규칙은 OS의 기본 모바일 선택 UI를 사용하지 않는다. 글자 크기와 터치 영역, 긴 항목이 있는 목록은 실제 대상 화면에서 점검해야 한다.

텍스트와 폼 값을 먼저 완성하고, 지원하는 브라우저에 장식을 더한다. 이 순서라면 구형 브라우저를 위해 별도의 가짜 선택 상자를 하나 더 만들지 않고도 의미 있는 대체 표시를 남길 수 있다.