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

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

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

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

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

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

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

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

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

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

👇 카테고리 글 목록

대표글

댓글 남기기