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。
兼容性
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0-11.0 | 2.0-40.0-moz- | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit- |
示例
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
</head>
<body>
请选择要测试的appearance值:
<select id="choice"></select><br>
<span></span>
<script>
(function() {
var $ = opener.$,
choice = document.getElementById("choice");
choice.onchange = function() {
var val = this.value,
span = $("span", document).css("appearance", val);
span.html(val === span.css("appearance") ? "" : "不支持");
}
$("#value dt").each(function(i) {
var val = this.innerHTML.replace(/[^\w-]/g, "");
choice.options[i] = new Option(val, val);
});
})();
</script>
</body>
</html>