CSS3 외형(Appearance) 속성

조금은 생소할 수도 있는 appearance 속성에 대하여 설명합니다. 이 속성은 크로스브라우징을 할때, 알아두면 곤란함을 줄일수 있습니다.

appearance 속성 소개

이 속성은 운영체제 및 브라우저에 기본적으로 설정되어 있는 테마를 기반으로 요소를 표현한다. 즉, 네이티브로 지원되는 모양들을 해제하거나 추가할때 이 속성을 이용할 수 있다.

div {
  appearance: button;
  -moz-appearance: button; /* Firefox */
  -webkit-appearance: button; /* Safari and Chrome */
}

예를 들면

• iOS의 폼 요소들에 부여되어 있는 둥근 테두리값이나 그림자 효과를 제거할때 사용할 수 있다.
• webit 계열의 브라우저의 type="search" 필드의 둥근 테두리 값이나 reset 효과를 나타내는 버튼을 삭제하는 데 사용할 수 있다.
• select 필드의 기본 화살표 모양을 삭제하거나 대체할 수 있다.

webkit 속성값

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

mozila 속성값

• 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

자바스크립트 문법

object.style.appearance="button"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
미지원	지원	지원	지원	미지원

모던 브라우저에서 아직 정식지원하지 않고 프리픽스를 이용해서 사용하여야 한다. Firefox는 -moz-appearance, Safari와 Chrome은 -webkit-appearance 를 이용한다.

참고 링크 :

• CSS3 appearance Property
• appearance