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

> Clean Markdown view of GeekNews topic #19998. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=19998](https://news.hada.io/topic?id=19998)
- GeekNews Markdown: [https://news.hada.io/topic/19998.md](https://news.hada.io/topic/19998.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2025-03-28T09:16:02+09:00
- Updated: 2025-03-28T09:16:02+09:00
- Original source: [developer.chrome.com](https://developer.chrome.com/blog/a-customizable-select?hl=en)
- Points: 8
- Comments: 4

## Summary

Chrome 135부터 `&lt;select&gt;` 요소에 CSS 커스터마이징이 가능해지며, 새로운 CSS 속성 `appearance: base-select`가 도입되어 다양한 스타일과 애니메이션 적용이 가능해졌습니다. 이 기능은 HTML 콘텐츠를 포함할 수 있게 하여, 기존에는 무시되던 이미지나 SVG도 렌더링할 수 있으며, JavaScript 인터페이스는 기존과 동일하게 유지됩니다. 다만, 이 기능은 Finch 실험으로 도입되어 필요 시 중단될 수 있으며, 일부 브라우저에서는 지원되지 않을 수 있습니다.

## Topic Body

- Chrome 135부터 `&lt;select&gt;` 요소에 대해 접근성 표준을 유지하면서도 CSS 커스터마이징이 가능한 새로운 기능 지원 시작  
- 수년간의 사양 조율 및 개발 끝에, 오래된 브라우저에서도 깨지지 않는 강력한 구성 요소로 제공됨  
- HTML 콘텐츠도 포함 가능하며, `appearance: base-select` 가  추가되면서 애니메이션, 스타일등 다양한 커스터마이징이 가능해짐   
  
### `appearance: base-select` 소개  
  
- 새로운 CSS 속성 `appearance: base-select`는 `&lt;select&gt;` 요소를 커스터마이징 가능한 새로운 상태로 만듦  
  ```css  
  .custom-select {  
    &, &::picker(select) {  
      appearance: base-select;    
    }  
  }  
  ```  
- # base-select 사용 시 생기는 새로운 기능  
  - `&lt;select&gt;` 내부 콘텐츠에 대한 브라우저의 HTML 파서 동작 변경  
  - 렌더링 방식과 내부 구조 변경  
  - 새로운 내부 파트 및 상태 제공  
  - 최소한의 기본 디자인 제공 (커스터마이징 최적화)  
  - 표시된 옵션이 팝오버처럼 최상위 레이어에 나타남  
  - 옵션 위치는 `anchor()`로 제어 가능  
- # base-select 사용 시 사라지는 기능  
  - 브라우저 창 외부로 `&lt;select&gt;` 렌더링 불가  
  - 모바일 OS의 기본 선택 UI 호출 안됨  
  - 가장 긴 `&lt;option&gt;`의 너비를 반영하지 않음  
  
### `&lt;select&gt;`에 HTML 콘텐츠 포함 가능  
- 기존에는 `&lt;option&gt;` 안에 이미지나 SVG 삽입 시 브라우저가 무시함  
- `appearance: base-select`를 적용하면 HTML 그대로 렌더링됨  
- Chrome에서는 SVG 포함된 옵션이 보이지만 Safari, Firefox 등은 지원하지 않음  
- 코드펜 데모: [실습 링크](https://codepen.io/web-dot-dev/pen/zxYaXzZ)  
- 이 기능은 Finch 실험으로 도입되어 필요 시 중단 가능함  
  
### 완전한 커스터마이징 가능  
- `base-select`의 모든 구성 요소는 교체, 애니메이션, 스타일 적용 가능  
- 다양한 디자인을 통해 의미 있는 선택 UI 구성 가능  
- 예시로는 상태 표시, 아바타 포함 옵션, 색상 선택기, 게시 상태 선택 등 있음  
- 코드펜 데모: [실습 링크](https://codepen.io/web-dot-dev/pen/gbOKyRZ)  
  
### JavaScript 인터페이스는 변경 없음  
- 기존 `&lt;select&gt;`에 대한 JavaScript 동작은 동일하게 유지됨  
- 단, `&lt;option&gt;`에 HTML을 넣은 경우 선택된 값 파싱 방식이 달라졌으므로 테스트 필요  
- `value` 속성을 사용하는 경우 별도 수정 필요 없음  
  
### 추가 자료  
#### 웹 표준  
- [Open UI Select 사양](https://open-ui.org/components/customizableselect/)  
- [HTML 사양 Pull Request](https://github.com/whatwg/html/issues/9799)  
- [Chrome Intent to Ship](https://groups.google.com/a/chromium.org/g/blink-dev/c/kN5LTzuTLVs/m/6HqTsmk3EQAJ)  
#### Chrome 관련 자료  
- [Chrome 블로그 요청 및 설명 글](https://developer.chrome.com/blog/rfc-customizable-select)  
- [커뮤니티 피드백 결과](https://developer.chrome.com/blog/rfc-customizable-select-findings)  
- [`&lt;select&gt;`에서 `&lt;hr&gt;` 사용하기](https://developer.chrome.com/blog/hr-in-select)  
- [Una의 설명 글 / 변경사항 정리 링크](https://una.im/select-updates/)  
- [Una의 Codepen 모음](https://codepen.io/collection/BNZjPe)  
#### 커뮤니티 자료  
- [Brecht De Ruyte Codepen 모음](https://codepen.io/collection/qOGape)  
- [CSS Tricks의 네이티브 vs 커스텀 select 비교](https://css-tricks.com/striking-a-balance-between-native-and-custom-select-elements/)  
- [Open Props UI의 `&lt;select&gt;` 구현](https://open-props-ui.netlify.app/components/inputs/select.html)  
- [애니메이션 적용된 커스텀 select 예제](https://codepen.io/argyleink/pen/QWXexXK)  
#### 커스터마이징된 `&lt;select&gt;`를 활용한 데모  
- [Una의 데모](https://codepen.io/una/full/MWMmYxb)  
- [Brecht의 데모](https://codepen.io/utilitybend/full/ZEPBGGR)  
- [Adam의 데모](https://cdpn.io/pen/debug/wvYrZEV)

## Comments



### Comment 36594

- Author: neo
- Created: 2025-04-01T10:57:33+09:00
- Points: 1

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

### Comment 36451

- Author: carnoxen
- Created: 2025-03-28T10:14:05+09:00
- Points: 1

그럼 `&lt;selectlist&gt;`는 필요없게 되는 건가요?

### Comment 36440

- Author: deminoth
- Created: 2025-03-28T09:41:20+09:00
- Points: 1

다른 이야기지만, 슬랙봇에서 제목의 &lt;select&gt;가 출력되지 않는군요 ㅎㅎ

### Comment 36452

- Author: xguru
- Created: 2025-03-28T10:45:50+09:00
- Points: 1
- Parent comment: 36440
- Depth: 1

앗 ㅠ 이거는 차후에 수정하겠습니다.