webkit 기반의 브라우저에서 form 요소들의 css 스타일링에

webkit 기반의 브라우저는 form 요소들을 브라우저 자체(User Agent)의 스타일은 적용시키는데 이로 인해 

레이아웃의 틀어짐, 디자인 문제 등이 발생하곤 합니다.

특히 맥OS 환경에서는 form요소의 디자인들이 퍼블리셔 또는 디자이너의 목적과 맞지 않게 임의대로 스타일을 적용 시킵니다.

이렇듯이 이러한 문제를 방지하고자 할 때는 아래의 css코드를 선언해주면 간단하게 해결 됩니다.

input[type=search]{

-webkit-appearance:none;

-webkit-box-sizing:content-box;

}

input 타입 중 무엇을 선택할 것인지에 대해서 정의 해줍니다.

그 후 webkit 접두어를 정의 해준 후 appearanc를 none으로 설정 해줍니다.

그 다음 박스의 전체적인 크기나 높이등을 제어하기 위해 webkit 접두어를 정의 해준 후 box-sizing:content-box를 선언하여 사용자 임의대로 css스타일을 적용 시킬 수 있게끔 합니다..