본문으로 바로가기

CSS3 외형(Appearance) 속성

category 웹코딩/CSS 2015. 7. 28. 10:00

조금은 생소할 수도 있는 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 를 이용한다.

참고 링크 :


'웹코딩 > CSS' 카테고리의 다른 글

Noto Sans(본고딕) 웹폰트  (10) 2015.08.14
CSS3 이면가시성(backface-visibility) 속성  (2) 2015.07.29
CSS 크기 단위  (0) 2015.06.17
CSS 배치 모델(Placement Model)  (2) 2015.06.16
CSS 박스 모델 크기 #2  (0) 2015.06.15