<select> 이제 CSS로 커스터마이징 가능

(developer.chrome.com)

7P by xguru 5일전 | ★ favorite | 댓글 4개

Chrome 135부터 <select> 요소에 대해 접근성 표준을 유지하면서도 CSS 커스터마이징이 가능한 새로운 기능 지원 시작
수년간의 사양 조율 및 개발 끝에, 오래된 브라우저에서도 깨지지 않는 강력한 구성 요소로 제공됨
HTML 콘텐츠도 포함 가능하며, appearance: base-select 가 추가되면서 애니메이션, 스타일등 다양한 커스터마이징이 가능해짐

`appearance: base-select` 소개

새로운 CSS 속성 appearance: base-select는 <select> 요소를 커스터마이징 가능한 새로운 상태로 만듦
```
.custom-select {  
  &, &::picker(select) {  
    appearance: base-select;    
  }  
}  
```
base-select 사용 시 생기는 새로운 기능
- <select> 내부 콘텐츠에 대한 브라우저의 HTML 파서 동작 변경
- 렌더링 방식과 내부 구조 변경
- 새로운 내부 파트 및 상태 제공
- 최소한의 기본 디자인 제공 (커스터마이징 최적화)
- 표시된 옵션이 팝오버처럼 최상위 레이어에 나타남
- 옵션 위치는 anchor()로 제어 가능
base-select 사용 시 사라지는 기능
- 브라우저 창 외부로 <select> 렌더링 불가
- 모바일 OS의 기본 선택 UI 호출 안됨
- 가장 긴 <option>의 너비를 반영하지 않음

`<select>`에 HTML 콘텐츠 포함 가능

기존에는 <option> 안에 이미지나 SVG 삽입 시 브라우저가 무시함
appearance: base-select를 적용하면 HTML 그대로 렌더링됨
Chrome에서는 SVG 포함된 옵션이 보이지만 Safari, Firefox 등은 지원하지 않음
코드펜 데모: 실습 링크
이 기능은 Finch 실험으로 도입되어 필요 시 중단 가능함

완전한 커스터마이징 가능

base-select의 모든 구성 요소는 교체, 애니메이션, 스타일 적용 가능
다양한 디자인을 통해 의미 있는 선택 UI 구성 가능
예시로는 상태 표시, 아바타 포함 옵션, 색상 선택기, 게시 상태 선택 등 있음
코드펜 데모: 실습 링크

JavaScript 인터페이스는 변경 없음

기존 <select>에 대한 JavaScript 동작은 동일하게 유지됨
단, <option>에 HTML을 넣은 경우 선택된 값 파싱 방식이 달라졌으므로 테스트 필요
value 속성을 사용하는 경우 별도 수정 필요 없음

추가 자료

웹 표준

Chrome 관련 자료

커뮤니티 자료

커스터마이징된 `<select>`를 활용한 데모

▲

GN⁺ 16시간전 [-]

Hacker News 의견

내가 이 기능에 대해 불균형적으로 흥분하는 것은 아마도 2000년대 초 웹 개발자로서의 나를 드러내는 것 같음. 선택 요소가 HTML로 재현할 수 없는 기능을 제공하기 때문에 매우 유용한 기능임
- 이제 자동 완성 및 태그 선택기를 다음으로 추가해야 함
이 기능이 널리 지원되기 전까지는 점진적 향상으로 사용해야 함. 현재 caniuse.com에 따르면 전 세계적으로 46% 지원됨
- 지원하지 않는 브라우저 사용자에게 나쁜 경험을 제공하지 않도록 주의해야 함
- 새로운 스타일링에 중요한 정보나 기능을 포함하지 않는 것이 중요함
이 기능이 구현되는 것을 보니 매우 기쁨. 커스텀 선택 상자 대체물보다 훨씬 큰 개선이 될 것임
내장 모바일 운영 체제 구성 요소를 트리거하지 않는다는 점이 걱정됨. 내장 구성 요소는 신뢰할 수 있고 접근 가능하며 반응성이 좋음
- Android UI가 열릴 때 신뢰할 수 있어 좋음. 선택 요소뿐만 아니라 날짜/시간 입력에도 적용됨
일부 컨트롤은 스타일을 적용하지 않는 것이 더 나음. 스크롤바의 경우 너무 얇거나 색상 대비가 나빠서 사용하기 어려움
- 기본 선택 요소는 가장 예쁜 컨트롤은 아니지만 기능을 수행함
웹 개발자들이 수십 년 동안 기다려온 것처럼 보임. 많은 JS 라이브러리를 대체할 가능성이 있음
- Chrome이 설치되어 있지 않지만, 예제 비디오에서 다중 선택 필드를 어떻게 처리하는지 궁금함
선택 요소를 Chromium 브라우저에서 CSS로 커스터마이즈할 수 있게 됨
- 웹 표준이 점점 더 복잡해지고 있음
Firefox 문제 링크 제공됨
계속 이렇게 진행하면 곧 VB6와 기능 동등성을 가질 수 있을 것임
깨진 JS 라이브러리보다 나음. 하지만 많은 옵션이 있을 때 레이아웃이 어떻게 되는지가 주요 관심사임
- 내장 모바일 운영 체제 구성 요소를 트리거하지 않는다는 점이 무서움. 레이아웃은 어떻게 되는지 궁금함
- 표시된 옵션이 anchor()로 위치됨
- 실험적이지만, 아마도 이 부분이 가장 좋은 부분일 수 있음. CSS에서 실제로 작동한다면 놀라운 일이 될 것임