[CSS] 사파리 환경 input 스타일 초기화

IE 환경의 고민이 사라졌다고 프론트엔드 개발자는 쉽게 마음을 놓으면 안된다. 

바로 사파리 환경이 있기 때문이다. 

( 모든 환경의 기본 스타일이 통일되길 기원합니다... )

 

크롬과 사파리의 스타일이 다른 부분은 많지만 이번에 input을 작업하면서 

다른 스타일로 내가 설정한 디자인이 깨지는 것을 발견했다. 

 

사파리에서는 input이 기본적으로 둥근 모서리와 그림자를 가지고 있다. 

그래서 따로 초기화를 하지 않으면 내가 설정한 스타일에 둥근 모서리와 그림자가 추가된다.. 

 

input {
  -webkit-border-radius: 0;
  -webkit-appearance: none;  
}

다음과 같이 설정해주면 input의 스타일이 초기화된다. 

radius는 둥근 모서리에 대한 설정이며, appearance는 그림자에 대한 설정이다.