아이폰 브라우저에서 select CSS가 적용되지 않는 이유와 해결 방법

iOS Safari에서 <select> 요소에 스타일이 제대로 적용되지 않아 당황하셨나요? 이 글에서는 아이폰 브라우저에서 CSS가 무시되는 이유와 함께, appearance 속성 활용법부터 커스텀 셀렉트 박스 구현까지 실질적인 해결 방법을 소개합니다.

아이폰에서 `<select>` CSS가 안 먹는 이유와 해결책은?

모바일 웹을 개발하다 보면 iPhone Safari 브라우저외 기타 브라우저에서 <select> 요소에 CSS 스타일이 제대로 적용되지 않는 경험, 한 번쯤 해보셨을 겁니다. 분명 border-radius, padding, background를 줬는데도 바뀌지 않죠. 왜 이런 일이 발생할까요?

원인

iOS Safari는 <select> 요소에 시스템 자체의 네이티브 UI를 고정적으로 적용합니다.
이는 사용자 경험(UX)을 통일하기 위한 의도이지만, 개발자 입장에선 스타일 제어가 어렵게 됩니다.

🔍 적용되지 않는 대표적인 스타일

border, border-radius
background, color
padding, font-size
appearance: none (일부 iOS 버전에서 비정상 동작)

해결 방법 3가지

appearance: none 속성 활용

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

CSS

※ 단, iOS 일부 버전에서는 완전하게 적용되지 않을 수 있습니다.

커스텀 셀렉트 UI로 대체

<select> 대신 <div>와 <ul>을 조합해서 직접 드롭다운 UI를 구현하면, 원하는 스타일을 완벽하게 적용할 수 있습니다. 이 경우 JavaScript로 동작을 제어해야 하므로, 직접 구현하거나 아래와 같은 라이브러리를 활용할 수 있습니다.

스타일 최소 적용으로 대체

너무 많은 커스텀은 하지 않고 아래처럼 최소한의 스타일만 적용하면 iOS에서 덜 무시당합니다.

select {
  font-size: 1rem;
  padding: 8px;
  background-color: #fff;
  border: 1px solid #ccc;
}

select {
  font-size: 1rem;
  padding: 8px;
  background-color: #fff;
  border: 1px solid #ccc;
}

CSS

마무리

아이폰 select CSS 적용 안됨에 대한 3가지 해결법은 제한적 스타일 적용, 커스텀 셀렉트로 변경, 최소한의 CSS만 적용 이렇게 3가지입니다. 전 마지막 최소한의 CSS 적용이 가장 현실적인 해결법이라 생각합니다. iOS의 네이티브 UI 강제 적용은 피할 수 없는 한계이지만, 여러가지 방법으로 원하는 UI를 구현은 가능합니다.