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

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

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

input {
-webkit-appearance: none;
}

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