iOS 아이폰 input 태그에 기본 CSS 제거하기

아이폰에서의 input 태그에는 기본 CSS가 적용되어 데스크톱으로 볼 때랑 디자인이 다릅니다. 테두리와 내부 그림자가 기본적으로 적용되어 본인이 설정한 CSS와 달라 디자인이 틀어질 수 있기 때문에 이 기본 CSS를 제거해야 합니다.

 

---

 

변경 전

변경 후

아래 CSS 코드를 CSS 파일이나 HTML의 <style> 태그에 적용하면 위 사진처럼 기본 CSS가 제거됩니다.

 

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

 

'appearance' CSS 속성은 적용된 그림자와 기본 설정을 임의로 제거하고, border-radius의 경우 기본 설정 테두리를 제거할 수 있습니다.