appearance

语法：

appearance：none | button | button-bevel ...

默认值：none

适用于：所有元素

继承性：无

动画性：否

计算值：指定值

取值：

none：
去除系统默认appearance的样式
button：
以按钮的风格渲染
button-arrow-down：
button-arrow-next：
button-arrow-previous：
button-arrow-up：
button-bevel：
button-focus：
caps-lock-indicator：
caret：
checkbox：
以复选框的风格渲染
checkbox-container：
checkbox-label：
checkmenuitem：
default-button：
dualbutton：
groupbox：
listbox：
以列表框的风格渲染
listitem：
以列表项的风格渲染
media-fullscreen-button：
media-mute-button：
media-play-button：
media-seek-back-button：
media-seek-forward-button：
media-slider：
media-sliderthumb：
menuarrow：
menubar：
menucheckbox：
menuimage：
menuitem：
menuitemtext：
menulist：
menulist-button：
menulist-text：
menulist-textfield：
menupopup：
menuradio：
menuseparator：
meterbar：
meterchunk：
progressbar：
以进度条的风格渲染
progressbar-vertical：
以垂直进度条的风格渲染
progresschunk：
以进度块的风格渲染
progresschunk-vertical：
以垂直进度块的风格渲染
push-button：
radio：
以单选框的风格渲染
radio-container：
radio-label：
radiomenuitem：
resizer：
resizerpanel：
scale-horizontal：
scalethumbend：
scalethumb-horizontal：
scalethumbstart：
scalethumbtick：
scalethumb-vertical：
scale-vertical：
scrollbarbutton-up：
以滚动条按钮-上的风格渲染
scrollbarbutton-right：
以滚动条按钮-右的风格渲染
scrollbarbutton-down：
以滚动条按钮-下的风格渲染
scrollbarbutton-left：
以滚动条按钮-左的风格渲染
scrollbargripper-horizontal：
scrollbargripper-vertical：
scrollbarthumb-horizontal：
以水平滚动条滑块的风格渲染
scrollbarthumb-vertical：
以垂直滚动条滑块的风格渲染
scrollbartrack-horizontal：
以水平滚动条拖动区域的风格渲染
scrollbartrack-vertical：
以垂直滚动条拖动区域的风格渲染
searchfield：
以搜索框的风格渲染
searchfield-cancel-button：
以搜索框取消按钮的风格渲染
searchfield-decoration：
searchfield-results-button：
searchfield-results-decoration：
separator：
sheet：
slider-horizontal：
sliderthumb-horizontal：
sliderthumb-vertical：
slider-vertical：
spinner：
spinner-downbutton：
spinner-textfield：
spinner-upbutton：
splitter：
square-button：
statusbar：
statusbarpanel：
tab：
以照选项卡标签的风格渲染
tabpanel：
以照选项卡区域的风格渲染
tabpanels：
tab-scroll-arrow-back：
tab-scroll-arrow-forward：
textarea：
以多行文本框的风格渲染
textfield：
以单行行文本框的风格渲染
textfield-multiline：
toolbar：
toolbarbutton：
toolbarbutton-dropdown：
toolbargripper：
toolbox：
tooltip：
以气泡提示的风格渲染
treeheader：
treeheadercell：
treeheadersortarrow：
treeitem：
treeline：
treetwisty：
treetwistyopen：
treeview：

说明：

设置或检索外观按照本地默认样式
  • 如果你想去除元素本身的外观并进行自定义，可以设置为none
  • 对应的脚本特性为appearance。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE Edge Firefox Chrome Safari Opera iOS
Safari		 Android
Browser		 Blackberry
Browser		 Opera
Mobile		 Chrome
for
Android		 Firefox
for
Android		 IE
Mobile		 UC
Browser
for
Android		 Samsung
Internet		 QQ
Browser		 Baidu
Browser
5.5-11 12-16 #1 2-34 -moz- #1 4-65 -webkit- #1 3.1-11 -webkit- #1 9-12.1 3.2-11 -webkit- #1 2.1-4.4.4 -webkit- #1 7-10 -webkit- #1 10-12.1 61 -webkit- #1 56 -moz- #1 10 11.4 -webkit- #1 4-5 -webkit- #1 1.2 -webkit- #1 7.12 -webkit- #1
35-59 -moz- #1 15-50 -webkit- #1 37 -webkit- #1 11 #1
  1. -webkit-appearance with value none is supported on IE11 Mobile for phones with "Windows Phone 8.1 Update"

示例：