iOS 인풋(input) 및 버튼(button) 스타일 제거 및 설정

iOS (사파리 공통) input 및 button 모서리 라운딩과 상단 그림자 제거

 

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

 

위와 같이 input 수정할 시 안드로이드 크롬에서 체크박스(checkbox)가 안 보이게 된다.

그래서 아래와 같이 수정하면 되는데, 상황에 따라 선택하여 사용하면 된다.

 

1. 추가로 체크박스를 다시 지정한다.

input:checked[type="checkbox"]{background-color:#fff;-webkit-appearance:checkbox;}

 

2. 체크박스를 제외 후 일괄 지정한다.

input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="search"], 
input[type="image"], 
input[type="tel"], 
button, 
select, 
textarea{-webkit-border-radius:0;-webkit-appearance:none;}