아이폰 특유의 button 모양 없애는 -webkit-appearance: none 제대로 사용하기

_{(코드만 바로 보시려면 아래로 스크롤하세요.)}

아이폰의 기본 button은 모양이 예쁘지만, 사실 UI 요소들을 아무런 커스터마이징 없이 사용하려고 하는 게 아니라면 별 도움이 되진 않습니다.

그리고 input, button, textarea는 거의 무조건 커스터마이징을 한다고 봐야죠. 셀렉트박스야 잘 하지 않는다 쳐도 말입니다.

매번 개발할 때마다 아이폰의 기본 모양을 리셋하는 CSS 코드를 찾게 되는데요. 코드는 -webkit-appearance: none으로 비교적 외우기 쉽습니다. 문제는 적용 범위입니다.

이 속성은 그냥 전체에게 적용하는 게 능사가 아닙니다. MDN appearance 속성 설명 페이지에서도 none조차 모든 브라우저에서 모든 요소에 대해 같은 동작을 하는 게 아니니 조심해서 써야 한다고 말합니다.

이 속성이 iOS 사파리에만 영향을 미치는 것도 아닙니다. 모든 브라우저가 브라우저의 기본 스타일을 UI 요소들에 매겨 놨습니다. 그걸 없애면 라디오 버튼, 체크박스 외곽선이 사라질 수도 있고, range 타입의 배경도 사라질 수 있습니다_{(아래 제가 구성한 테스트에서 확인할 수 있습니다)}.

그래서 아래 제가 설계한 코드는 우리가 디자인을 자주 건드리는 요소들에 대해서만 적용하려고 한 코드입니다.

일단 둥근 모서리는 명시해서 제어하게 했습니다_{(input[type=color]는 유지)}.
브라우저 기본 모양은 버튼에서만 제거했습니다.
버튼이 가장 말썽을 일으키는 요소이고, 또 거의 무조건 커스터마이징을 하는 요소기 때문입니다.
나머지 input, textarea, select는 필요에 따라서 각기 적용하는 편이 낫다고 판단했습니다.
-webkit-appearance: none을 줘도 iOS 사파리에서는 여전히 버튼의 기본 모양이 있습니다.
버튼의 글자색은 파란색이고, submit 버튼엔 파란 배경색과 희고 굵은 글씨가 있습니다. 그러나 이 역시 프로젝트별로 판단하는 편이 낫다고 봤습니다.

그래서 나온 코드는 아래와 같습니다. 앞으로 좀 다듬기는 해야 합니다. 아직 실전에 많이 사용해 본 건 아닙니다.

input:not([type=color]), button, textarea, select {
  border-radius: 0;
}

button, input[type=button], input[type=submit], input[type=reset] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

아래는 코드펜에서 진행한 테스트입니다. 리셋5가 위의 코드를 적용한 것입니다. _{(코드펜을 내보내기한 html 문서로 볼 수도 있습니다.)}

_{사진 Firmbee.com on Unsplash}