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>