[CSS] 사파리(Safari) 기본 스타일 제거하기 (input, button, textarea)

사파리(Safari) 기본 스타일 제거하기 (input, button, textarea)

개요

• Mac OS, iOS에서 사파리(Safari) 브라우저를 통해 홈페이지에 접속할 경우, 사파리 기본 스타일이 적용되어 자신이 원한 스타일이 안나오는 경우가 있다.
  • 이러한 특징은 <input>, <button>, <textarea> 요소에서 두드러지게 나타난다.
• 이러한 사파리 기본 스타일은 아래와 같은 CSS 코드를 추가해줌으로써 없애줄 수 있다.

 

코드

input, textarea, button {
    appearance: none; 
    border-radius: 0;
    -moz-appearance: none; 
    -webkit-appearance: none; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0;
}

• appearance 속성은 OS의 테마별 기본 스타일을 설정하는 속성이다.

 

• 라디오 버튼(Radio Button)이 안보이는 문제가 생길 수 있으므로 다음의 코드를 추가해준다.

input[type='radio'] {
    appearance: auto;
}

 

참고 사이트

https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

appearance - CSS: Cascading Style Sheets | MDN