safari나 chrome에서 정해진 디자인을 없애고 싶은 경우 "appearance"

#PersonalInfoChk{-webkit-appearance: none;-moz-appearance: none;appearance: none;}

 

속성값 -webkit-appearance

모바일 Safari 나 Chrome 에서 input, textarea 은 내부에 각 디자인 css 값이 들어가기 때문에 아래처럼 변경을 해줘야 원하는 원하는 디자인대로 표현이 가능하다.

 

/* Remove inner shadow from inputs on mobile iOS */
textarea, input {
-webkit-appearance: none;
-webkit-border-radius: 0;
}

/* input에서 라디오, 체크박스를 살리는 방법 */
-webkit-appearance:checkbox;

 

select 박스에서 기본 화살표를 삭제하는 방법도 동일한데, 아래의 소스처럼 select에 스타일 적용한다.

 

select::-ms-expand { display: none; }
select { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none;
	background: url(/img/sub/select_icon.png) no-repeat 90% 50%;
}