(코드만 바로 보시려면 아래로 스크롤하세요.)
아이폰의 기본 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
댓글 남기기