css 초기화 appearance: none

appearance 란?

네이티브 (=os/브라우저 자체 테마)요소 디자인 해제/변경

*크로스브라우징(=모든 브라우저 동일화면 구현)에 유용

주요 최신 브라우저 지원 (IE 미지원 ,Safari 부분지원)

 

요소자체구성요소숨기기 (= 요소내장구성요소제거 = appearance속성 = 어피어런스속성) (실렉트화살표제거, select, arrow)

 

 

• -webkit- : 구글, 사파리 브라우저에 적용.
• -moz- : 파이어폭스 브라우저에 적용.
• -ms- : 익스플로러에 적용. (생략 가능)
• -o- : 오페라 브라우저에 적용.

/* -webkit-appearance: none -> iOS에서 폼요소에 내부그림자가 나오므로 빼줌 */

input, select, textarea, button { 
	vertical-align: middle; margin: 0;
	padding: 0; border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none; 
	appearance: none; 
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); 
}

표준속성

브라우저 미지원으로 사파리 등 추가해주기

 

 

초기화코드