모바일 사파리에서 인풋 요소들이 이상하게 나오는 이슈

모바일 사파리 , 즉 아이폰의 웹브라우저에서 input요소를 이용해 UI를 개발하다보면 가끔가다 input 안에 shadow가 보인다던지. 양옆에 border가 생긴다던지 하는 의도치 않은 화면이 보이는 문제가 있다.

이건 브라우저 버그라기보다는 webkit-appearance 가 동작하기 때문이다. ( 아이폰이 단말에 맞춰서 강조 또는 ui적으로 보여줌 )

이걸 해결하기 위해서는 css 에 아래 코드 한줄이면 끝난다.

input {
-webkit-appearance: none;
}

해당 css 는 모바일 사파리 즉 아이폰에서만 발생하므로, 안드로이드 브라우저에서는 발생하지 않는다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.

다음의 HTML 태그와 속성을 사용할 수 있습니다: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>