文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

-moz-appearance

这是一项实验中的技术

由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。还要注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

-moz-appearanceCSS属性在Gecko（Firefox）中使用，以基于操作系统主题的平台本地样式显示元素。

-webkit-appearance属性被基于WebKit（例如Safari）和基于Blink（例如Chrome，Opera）的浏览器用来实现相同的功能。请注意，出于兼容性原因，Edge还支持-webkit-appearance（而不是-ms-appearance）。

代码语言：javascript
复制
/* Partial list of available values in Gecko */
-moz-appearance: none;
-moz-appearance: button;
-moz-appearance: checkbox;
-moz-appearance: scrollbarbutton-up;

/* Partial list of available values in WebKit/Blink */
-webkit-appearance: none;
-webkit-appearance: button;
-webkit-appearance: checkbox;
-webkit-appearance: scrollbarbutton-up;

这个属性经常用在XUL的样式表中，用来设计拥有平台原生UI样式的自定义的组件，也用于XBL中，用来实现火狐OS平台的组件。

请不要将这个属性用于网页中：不仅是因为这个属性不是W3C标准, 也是因为这个属性在各个浏览器中的表现不一致。甚至在同一个元素上将这个属性的值设为none，也会在不同浏览器中产生差别。并且一些浏览器也不支持这个属性

初始值

none (but this value is overriden in the user agent CSS)

适用元素

all elements

是否是继承属性

no

适用媒体

visual

计算值

as specified

动画类型

discrete

正规顺序

the unique non-ambiguous order defined by the formal grammar

语法

该-moz-appearance属性可以被指定为从下面的列表中选择的单个值。

值

<appearance>是下列关键字之一：

Value

Demo

Description

none

div {-moz-appearance: none; -webkit-appearance: none; color: black;} <div>Lorem</div>

没有任何特殊样式被应用上，这是默认的值。 但是，有这两个BUG： bug?649849 和 bug?605985。

button

div {-moz-appearance: button; -webkit-appearance: button; color: black; } <div>Lorem</div>

这个元素将被绘制成按钮样式。

button-arrow-down

div {-moz-appearance: button-arrow-down; -webkit-appearance: button-arrow-down; color: black; } <div>Lorem</div>

?

button-arrow-next

div {-moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; color: black; } <div>Lorem</div>

?

button-arrow-previous

div {-moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; color: black; } <div>Lorem</div>

?

button-arrow-up

div {-moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; color: black; } <div>Lorem</div>

?

button-bevel

div {-moz-appearance: button-bevel; -webkit-appearance: button-bevel; color: black; } <div>Lorem</div>

?

button-focus

div {-moz-appearance: button-focus; -webkit-appearance: button-focus; color: black; } <div>Lorem</div>

?

caret

div {-moz-appearance: caret; -webkit-appearance: caret; color: black; } <div>Lorem</div>

?

checkbox

div {-moz-appearance: checkbox; -webkit-appearance: checkbox; color: black; } <div>Lorem</div>

这个元素将被绘制成复选框样式，仅包括可勾选的那部分。

checkbox-container

div {-moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; color: black; } <div>Lorem</div>

这个元素将被绘制成复选框容器，并且可在当前平台下形成高亮样式。一般情况下，它会包含一个复选框和一个标签组件。

checkbox-label

div {-moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; color: black; } <div>Lorem</div>

?

checkmenuitem

div {-moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; height: 20px; color: black; } <div>Lorem</div>

?

dualbutton

div {-moz-appearance: dualbutton; -webkit-appearance: dualbutton; color: black; } <div>Lorem</div>

?

groupbox

div {-moz-appearance: groupbox; -webkit-appearance: groupbox; color: black; } <div>Lorem</div>

?

listbox

div {-moz-appearance: listbox; -webkit-appearance: listbox; height:20px; color: black; } <div>Lorem</div>

?

listitem

div {-moz-appearance: listitem; -webkit-appearance: listitem; color: black; } <div>Lorem</div>

?

menuarrow

div {-moz-appearance: menuarrow; -webkit-appearance: menuarrow; color: black; } <div>Lorem</div>

?

menubar

div {-moz-appearance: menubar; -webkit-appearance: menubar; color: balck; } <div>Lorem</div>

?

menucheckbox

div {-moz-appearance: menucheckbox; -webkit-appearance: menucheckbox; color: black; } <div>Lorem</div>

?

menuimage

div {-moz-appearance: menuimage; -webkit-appearance: menuimage; color: black; } <div>Lorem</div>

?

menuitem

div {-moz-appearance: menuitem; -webkit-appearance: menuitem; color: black; } <div>Lorem</div>

这个元素将被绘制成菜单项，鼠标移上去时会有高亮效果。

menuitemtext

div {-moz-appearance: menuitemtext; -webkit-appearance: menuitemtext; color: black; } <div>Lorem</div>

?

menulist

div {-moz-appearance: menulist; -webkit-appearance: menulist; color: black; } <div>Lorem</div>

?

menulist-button

div {-moz-appearance: menulist-button; -webkit-appearance: menulist-button; color: black; } <div>Lorem</div>

这个元素将被绘制成带有下拉菜单图标的按钮。

menulist-text

div {-moz-appearance: menulist-text; -webkit-appearance: menulist-text; color: black; } <div>Lorem</div>

?

menulist-textfield

div {-moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; color: black; } <div>Lorem</div>

这个元素将被绘制成菜单列表中的文本框。（未在Windows平台下实现）

menupopup

div {-moz-appearance: menupopup; -webkit-appearance: menupopup; color: black; } <div>Lorem</div>

?

menuradio

div {-moz-appearance: menuradio; -webkit-appearance: menuradio; color: black; } <div>Lorem</div>

?

menuseparator

div {-moz-appearance: menuseparator; -webkit-appearance: menuseparator; color: transparent; } <div>Lorem</div>

?

meterbar

div {-moz-appearance: meterbar; -webkit-appearance: meterbar; color: black; } <div>Lorem</div>

Fx 16 中的新特性

meterchunk

div {-moz-appearance: meterchunk; -webkit-appearance: meterchunk; color: black; } <div>Lorem</div>

Fx 16 中的新特性

progressbar

div {-moz-appearance: progressbar; -webkit-appearance: progressbar; color: black; } <div>Lorem</div>

这个元素将被绘制成进度条样式。

progressbar-vertical

div {-moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; color: transparent; } <div>Lorem</div>

?

progresschunk

div {-moz-appearance: progresschunk; -webkit-appearance: progresschunk; color: black; } <div>Lorem</div>

?

progresschunk-vertical

div {-moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; color: black; } <div>Lorem</div>

?

radio

div {-moz-appearance: radio; -webkit-appearance: radio; color: black; } <div>Lorem</div>

这个元素将被绘制成单选框样式，仅包括可勾选的那部分。

radio-container

div {-moz-appearance: radio-container; -webkit-appearance: radio-container; color: black; } <div>Lorem</div>

这个元素将被绘制成单选框容器，并且可在当前平台下形成高亮样式。一般情况下，它会包含一个单选框和一个标签组件。

radio-label

div {-moz-appearance: radio-label; -webkit-appearance: radio-label; color: black; } <div>Lorem</div>

?

radiomenuitem

div {-moz-appearance: radiomenuitem; -webkit-appearance: radiomenuitem; color: black; } <div>Lorem</div>

?

range

div {-moz-appearance: range; -webkit-appearance: radiomenuitem; color: black; } range <div>Lorem</div>

?

range-thumb

div {-moz-appearance: range-thumb; -webkit-appearance: range-thumb; color: black; } <div>Lorem</div>

?

resizer

div {-moz-appearance: resizer; -webkit-appearance: resizer; color: transparent; } <div>Lorem</div>

?

resizerpanel

div {-moz-appearance: resizerpanel; -webkit-appearance: resizerpanel; color: black; } <div>Lorem</div>

?

scale-horizontal

div {-moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; color: transparent; } <div>Lorem</div>

?

scalethumbend

div {-moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; color: black; } <div>Lorem</div>

?

scalethumb-horizontal

div {-moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; color: transparent; } <div>Lorem</div>

?

scalethumbstart

div {-moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; color: black; } <div>Lorem</div>

?

scalethumbtick

div {-moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; color: black; } <div>Lorem</div>

?

scalethumb-vertical

div {-moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; color: black; } <div>Lorem</div>

?

scale-vertical

div {-moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; color: transparent; } <div>Lorem</div>

?

scrollbarbutton-down

div {-moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; color: black; } <div>Lorem</div>

?

scrollbarbutton-left

div {-moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; color: black; } <div>Lorem</div>

?

scrollbarbutton-right

div {-moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; color: black; } <div>Lorem</div>

?

scrollbarbutton-up

div {-moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; color: black; } <div>Lorem</div>

?

scrollbarthumb-horizontal

div {-moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; color: black; } <div>Lorem</div>

?

scrollbarthumb-vertical

div {-moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; color: black; } <div>Lorem</div>

?

scrollbartrack-horizontal

div {-moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; color: black; } <div>Lorem</div>

?

scrollbartrack-vertical

div {-moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; color: black; } <div>Lorem</div>

?

searchfield

div {-moz-appearance: searchfield; -webkit-appearance: searchfield; color: black; } <div>Lorem</div>

?

separator

div {-moz-appearance: separator; -webkit-appearance: separator; color: transparent; } <div>Lorem</div>

?

sheet

div {-moz-appearance: sheet; -webkit-appearance: sheet; color: black; } <div>Lorem</div>

?

spinner

div {-moz-appearance: spinner; -webkit-appearance: spinner; color: transparent; } <div>Lorem</div>

?

spinner-downbutton

div {-moz-appearance: spinner-downbutton; -webkit-appearance: spinner-downbutton; color: black; } <div>Lorem</div>

?

spinner-textfield

div {-moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; color: black; } <div>Lorem</div>

?

spinner-upbutton

div {-moz-appearance: spinner-upbutton; -webkit-appearance: spinner-upbutton; color: black; } <div>Lorem</div>

?

splitter

div {-moz-appearance: splitter; -webkit-appearance: splitter; color: transparent; } <div>Lorem</div>

?

statusbar

div {-moz-appearance: statusbar; -webkit-appearance: statusbar; color: black; } <div>Lorem</div>

?

statusbarpanel

div {-moz-appearance: statusbarpanel; -webkit-appearance: statusbarpanel; color: black; } <div>Lorem</div>

?

tab

div {-moz-appearance: tab; -webkit-appearance: tab; height: 20px; color: black; } <div>Lorem</div>

?

tabpanel

div {-moz-appearance: tabpanel; -webkit-appearance: tabpanel; color: black; } <div>Lorem</div>

?

tabpanels

div {-moz-appearance: tabpanels; -webkit-appearance: tabpanels; color: black; } <div>Lorem</div>

?

tab-scroll-arrow-back

div {-moz-appearance: tab-scroll-arrow-back; -webkit-appearance: tab-scroll-arrow-back; color: black; } <div>Lorem</div>

?

tab-scroll-arrow-forward

div {-moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; color: black; } <div>Lorem</div>

?

textfield

div {-moz-appearance: textfield; -webkit-appearance: textfield; color: black; } <div>Lorem</div>

?

textfield-multiline

div {-moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; color: black; } <div>Lorem</div>

?

toolbar

div {-moz-appearance: toolbar; -webkit-appearance: toolbar; color: black; } <div>Lorem</div>

?

toolbarbutton

div {-moz-appearance: toolbarbutton; -webkit-appearance: toolbarbutton; color: black; } <div>Lorem</div>

?

toolbarbutton-dropdown

div {-moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; color: black; } <div>Lorem</div>

?

toolbargripper

div {-moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; color: black; } <div>Lorem</div>

?

toolbox

div {-moz-appearance: toolbox; -webkit-appearance: toolbox; color: black; } <div>Lorem</div>

?

tooltip

div {-moz-appearance: tooltip; -webkit-appearance: tooltip; color: black; } <div>Lorem</div>

?

treeheader

div {-moz-appearance: treeheader; -webkit-appearance: treeheader; color: black; } <div>Lorem</div>

?

treeheadercell

div {-moz-appearance: treeheadercell; -webkit-appearance: treeheadercell; height:20px; color: black; } <div>Lorem</div>

?

treeheadersortarrow

div {-moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; color: black; } <div>Lorem</div>

?

treeitem

div {-moz-appearance: treeitem; -webkit-appearance: treeitem; color: black; } <div>Lorem</div>

?

treeline

div {-moz-appearance: treeline; -webkit-appearance: treeline; color: black; } <div>Lorem</div>

?

treetwisty

div {-moz-appearance: treetwisty; -webkit-appearance: treetwisty; color: transparent; } <div>Lorem</div>

?

treetwistyopen

div {-moz-appearance: treetwistyopen; -webkit-appearance: treetwistyopen; color: transparent; } <div>Lorem</div>

?

treeview

div {-moz-appearance: treeview; -webkit-appearance: treeview; color: black; } <div>Lorem</div>

?

-moz-win-borderless-glass

div {-moz-appearance: -moz-win-borderless-glass; color: black; } <div>Lorem</div>

仅能在Vista及之后的系统中使用。这个样式将会应用磨砂玻璃样式， -- 但是不含边框 -- 。

-moz-win-browsertabbar-toolbox

div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; } <div>Lorem</div>

仅能在Vista及之后的系统中使用。这个工具栏样式主要用于浏览器的标签上。

-moz-win-communicationstext

div {-moz-appearance: -moz-win-communicationstext; color: black; } <div>Lorem</div>

?

-moz-win-communications-toolbox

div {-moz-appearance: -moz-win-communications-toolbox; color: black; } <div>Lorem</div>

仅能在Vista及之后的系统中使用。这个工具栏样式主要用于通信和生产应用，对应的前景色是 -moz-win-communicationstext.

-moz-win-exclude-glass

div {-moz-appearance: -moz-win-exclude-glass; color: black; } <div>Lorem</div>

仅能在Vista及之后的系统中使用。这个样式用于取消元素磨砂玻璃效果。

-moz-win-glass

div {-moz-appearance: -moz-win-glass; color: black; } <div>Lorem</div>

仅能在Vista及之后的系统中使用。这个样式用于元素应用磨砂玻璃效果

-moz-win-mediatext

div {-moz-appearance: -moz-win-mediatext; color: black; } <div>Lorem</div>

?

-moz-win-media-toolbox

div {-moz-appearance: -moz-win-media-toolbox; color: black; } <div>Lorem</div>

仅能在Vista及之后的系统中使用。这个工具栏样式主要用于管理媒体对象。对应的前景色是 -moz-win-mediatext.

-moz-window-button-box

div {-moz-appearance: -moz-window-button-box; color: black; } <div>Lorem</div>

?

-moz-window-button-box-maximized

div {-moz-appearance: -moz-window-button-box-maximized; color: black; } <div>Lorem</div>

?

-moz-window-button-close

div {-moz-appearance: -moz-window-button-close; color: black; } <div>Lorem</div>

?

-moz-window-button-maximize

div {-moz-appearance: -moz-window-button-maximize; color: black; } <div>Lorem</div>

?

-moz-window-button-minimize

div {-moz-appearance: -moz-window-button-minimize; color: black; } <div>Lorem</div>

?

-moz-window-button-restore

div {-moz-appearance: -moz-window-button-restore; color: black; } <div>Lorem</div>

?

-moz-window-frame-bottom

div {-moz-appearance: -moz-window-frame-bottom; color: black; } <div>Lorem</div>

?

-moz-window-frame-left

div {-moz-appearance: -moz-window-frame-left; color: black; } <div>Lorem</div>

?

-moz-window-frame-right

div {-moz-appearance: -moz-window-frame-right; color: black; } <div>Lorem</div>

?

-moz-window-titlebar

div {-moz-appearance: -moz-window-titlebar; color: black; } <div>Lorem</div>

?

-moz-window-titlebar-maximized

div {-moz-appearance: -moz-window-titlebar-maximized; color: black; } <div>Lorem</div>

?

正式语法

代码语言：javascript
复制
none | button | button-arrow-down | button-arrow-next | button-arrow-previous | button-arrow-up | button-bevel | button-focus | caret | checkbox | checkbox-container | checkbox-label | checkmenuitem | dualbutton | groupbox | listbox | listitem | menuarrow | menubar | menucheckbox | menuimage | menuitem | menuitemtext | menulist | menulist-button | menulist-text | menulist-textfield | menupopup | menuradio | menuseparator | meterbar | meterchunk | progressbar | progressbar-vertical | progresschunk | progresschunk-vertical | radio | radio-container | radio-label | radiomenuitem | range | range-thumb | resizer | resizerpanel | scale-horizontal | scalethumbend | scalethumb-horizontal | scalethumbstart | scalethumbtick | scalethumb-vertical | scale-vertical | scrollbarbutton-down | scrollbarbutton-left | scrollbarbutton-right | scrollbarbutton-up | scrollbarthumb-horizontal | scrollbarthumb-vertical | scrollbartrack-horizontal | scrollbartrack-vertical | searchfield | separator | sheet | spinner | spinner-downbutton | spinner-textfield | spinner-upbutton | splitter | statusbar | statusbarpanel | tab | tabpanel | tabpanels | tab-scroll-arrow-back | tab-scroll-arrow-forward | textfield | textfield-multiline | toolbar | toolbarbutton | toolbarbutton-dropdown | toolbargripper | toolbox | tooltip | treeheader | treeheadercell | treeheadersortarrow | treeitem | treeline | treetwisty | treetwistyopen | treeview | -moz-mac-unified-toolbar | -moz-win-borderless-glass | -moz-win-browsertabbar-toolbox | -moz-win-communicationstext | -moz-win-communications-toolbox | -moz-win-exclude-glass | -moz-win-glass | -moz-win-mediatext | -moz-win-media-toolbox | -moz-window-button-box | -moz-window-button-box-maximized | -moz-window-button-close | -moz-window-button-maximize | -moz-window-button-minimize | -moz-window-button-restore | -moz-window-frame-bottom | -moz-window-frame-left | -moz-window-frame-right | -moz-window-titlebar | -moz-window-titlebar-maximized

示例

下面将使元素看起来像Firefox中的工具栏按钮：

代码语言：javascript
复制
.exampleone {
  -moz-appearance: toolbarbutton;
}

另见这个JSFiddle的示例，说明如何使用appearance: none将自定义样式应用于单选按钮和复选框。

规范

Specification

Status

Comment

CSS Basic User Interface Module Level 3The definition of 'appearance' in that specification.

Candidate Recommendation

Initial definition

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Basic support

1.0

12-webkit2

1.0 (1.7 or earlier)-moz1 54 (54)3

No support2

15-webkit

3.0-webkit

Feature

Android

Edge

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Basic support

(Yes)

(Yes)-webkit

(Yes)

11.0-webkit2

(Yes)

(Yes)

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com