[CSS] 사파리에서 기본 input 스타일 제거하기

 

포트폴리오 작업을 대강 끝내고 크로스 브라우징 확인 중에 모바일 사파리에서 input 스타일이 다른 부분을 발견했다.

데스크탑 사파리로 봤을 땐 분명 괜찮았는데...!! 모바일로 보니까 input 에 border-radius가 들어가 있었다.

분명 input에 border-radius: 0 을 줬는데도.... 그냥은 먹히지가 않았다(😂)

 

그리고 알아낸 방법! 이렇게 하니까 다행히 잘 먹었다.

 

input[type="text"],
input[type="password"],
input[type="submit"],
input[type="search"],
input[type="tel"],
input[type="email"],
html input[type="button"],
input[type="reset"] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  outline: 0;
}

 

진짜 모바일 사파리만 스타일이 안 먹어서 얼마나 낑낑거렸는지 모르겠다.

그래도 잘 해결됐으니 다행!!

 

 

 

- 끝 -