select 태그 사파리에서 적용시 기본 style 변경

아이폰에서 웹뷰로 웹페이지를 띄워주고 있는데 , 이 select 태그만 style이 적용이 안되었다..

뭐가 문제일까 공부하다가 Vendor prefix에 대해 배우게 되었다.

 

Vendor prefix란

Css의 Class앞에 -moz-, -webkit-, -o-, -ms-라는 각 브라우저에서 판독이 가능한 접두어를 붙여서 해당 브라우저에서 인식할 수 있게 하는 것이다.

 

 

아래 사진 처럼 각 브라우저 마다 css를 먹일 수 있게된다.

webkit은 사파리, 크롬 브라우저에서 border-radius 가 100px

ms 는 익스플로러 전용이다.

 

 

실제로 저렇게 나누어서 사용하지않고 표준 css 같은 경우에는 vendor prefix를 붙여주지 않고 하나로 통일 시켜주면 된다.

 

만약 그 브라우저에서 지원하지 않는 css 기능이 있을때 사용하면 될 것 같다.

 

여튼 그래서 검색끝에 

 

http://sunkyun.com/community/bbs/board.php?bo_table=html_css&wr_id=11 

[CSS] 아이폰 사파리 input, select 기본스타일 제거, 익스플로러 select 화살표 제거 > HTML/CSS | SUNKYUN.COM

 

위 자료를 보면 webkit 을 사용해서 크롬 사파리 브라우저에서 select 기본 스타일을 제거함으로써 문제를 해결했다.