freezner

[iOS] 웹 폼버튼 기본 스타일 제거하는 방법

iOS를 사용하는 아이폰이나 아이패드에서 사파리로 작업된 웹페이지를 확인하면 의도와 다르게 결과물이 나오는 경우가 있습니다.

그 중 대표적인 것이 폼 버튼 부분입니다.

input button이나 submit과 같은 버튼 타입 컨트롤은 iOS에서 고정된 기본 스타일로 표시되도록 적용되고 있습니다. 그래서 버튼에 아무리 css 속성을 주어도 width, height와 같이 사이즈만 변할 뿐 외형 자체는 변경이 되지 않습니다. 이때 이 기본 스타일을 제거하는 방법은 css 한줄로 해결할 수 있습니다.

아래 예시는 submit 타입 버튼 컨트롤에 대한 적용 방법입니다.

input[type=submit] {-webkit-appearance:none;}

이렇게 -webkit-appearance:none; 속성을 부여하면 iOS의 기본 스타일은 제거되고 css에서 사용자가 정의한 스타일로 반영됩니다.

Exit mobile version