[css] 외형(appearance)

크로스브라우징을 하다보면 Safari에서 버튼, 또는 셀렉트 버튼의 모양 때문에 골치가 아픈 경우가 발생합니다😣

 

바로 appearance 속성 때문인데요,

해당 속성은 운영체제 및 브라우저에 기본적으로 설정되어 있는 테마를 기본으로 요소를 표현해냅니다.

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

 

---

appearance 속성

appearance 속성은 네이티브로 지원되는 모양(원래 운영체제 또는 브라우저가 가지고 있는 테마)들을 해제하거나 추가할 때 사용할 수 있습니다.

div { appearance: button; -moz-appearance: button; -webkit-appearance: button; }

 

예를 들면,

- iOS의 폼 요소들에 부여되어 있는 둥근 테두리값이나 그림자 효과를 제거할 때 사용할 수 있습니다.

- webkit 계열의 브라우저의 type="search" 필드의 둥근 테두리 값이나 reset 효과를 나타내는 버튼을 삭제하는 데 사용할 수 있습니다.

- select 필드의 기본 화살표 모양을 삭제하거나 대체할 수 있습니다.

 

appearance 예제

/* select box 안의 기본 화살표 표시 없애기 */
select {
    -moz-appearance:none;    /* Firefox */
    -webkit-appearance:none;/* Safari and Chrome */
    appearance:none;        /* 화살표 없애기 공통 */
 
}
select::-ms-expand { /* IE10, IE11 */
    display:none;    /* 숨겨진 화살표의 영역 유지 X */
    display:hidden; /* 숨겨진 화살표의 영역 유지 O */
}

 

appearance 구문

selector {appearance: 속성값;}

 

 

webkit의 기본 appearance 속성 값

checkbox	menulist-button	scrollbarthumb-horizontal
radio	menulist-text	scrollbarthumb-vertical
push-button	menulist-textfield	scrollbargripper-horizontal
square-button	scrollbarbutton-up	scrollbargripper-vertical
button	scrollbarbutton-down	slider-horizontal
button-bevel	scrollbarbutton-left	slider-vertical
listbox	scrollbarbutton-right	sliderthumb-horizontal
listitem	scrollbartrack-horizontal	sliderthumb-vertical
menulist	scrollbartrack-vertical	caret
searchfield	searchfield-decoration	searchfield-results-decoration
searchfield-results-button	searchfield-cancel-button	textfield
textarea

 

mozila의 기본 appearance 속성 값

none	button	checkbox
checkbox-container	checkbox-small	dialog
listbox	menuitem	menulist
menulist-button	menulist-textfield	menupopup
progressbar	radio	radio-container
radio-small	resizer	scrollbar
scrollbarbutton-down	scrollbarbutton-left	scrollbarbutton-right
scrollbarbutton-up	scrollbartrack-horizontal	scrollbartrack-vertical
separator	statusbar	tab
tab-left-edge Obsolete	tabpanels	textfield
textfield-multiline	toolbar	toolbarbutton
toolbox	-moz-mac-unified-toolbar	-moz-win-borderless-glass
-moz-win-browsertabbar-toolbox	-moz-win-communications-toolbox	-moz-win-glass
-moz-win-media-toolbox	tooltip	treeheadercell
treeheadersortarrow	treeitem	treetwisty
treetwistyopen	treeview	window

 

JavaScript 문법

object.style.appearance="button"