[CSS] IOS에서 <input> element에 적용된 background-color 제거하기 (shadow, border-radius)

분명 크롬에서 개발자 도구 -> IOS를 설정해서 보면 이렇게 깔끔하게 배경색이 없는 input창이 만들어지는데

배포 후 아이폰에서 확인하면 이렇게 배경색이 지정되어 나타난다

원인

IOS에서는 기본적으로 적용되는 스타일이 따로 존재한다
input의 경우 shadow, border-radius, background-color가 사용자 지정과 상관없이
IOS에서 기본으로 적용하는 스타일이 입혀진다

나의 경우 이미 style에 shadow와 border-radius를 적용했기 때문에 
IOS가 기본 적용한 shadow와 border-radius가 나타나지 않았지만
backgroundc-color는 내가 지정하지 않은 컬러가 아이폰 상에서 계속 나타났다

 

해결

해결법은 간단하다
배경색을 투명하게 설정하면 된다!

background-color : transparent;

transparent 적용 후 input

그리고 기본으로 적용된 스타일을 제거하기 위해서 
아래 코드를 작성하면 된다고 한다.

input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}