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

(developer.chrome.com)

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>의 너비를 반영하지 않음