Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

-moz-appearance (-webkit-appearance)

非標準
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

-moz-appearance CSS プロパティは、OS のテーマをベースにしたプラットフォーム用のスタイル付けを使用して要素を表示するために、Gecko (Firefox) によって使用されます。

このプロパティは XUL スタイルシート内で、プラットフォーム固有のカスタムウィジェットをデザインするために頻繁に使用されます。また、Mozilla プラットフォームに搭載するウィジェットの XBL 実装でも使用されます。

このプロパティは Web サイトで使用しないでください。非標準であるだけでなく、動作がブラウザにより異なります。キーワード none でさえ各フォーム要素でのふるまいがブラウザ間で一致しておらず、またまったくサポートしていないブラウザもあります。

初期値none (but this value is overriden in the user agent CSS)
適用対象全要素
継承不可
メディアvisual
計算値指定値
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* Gecko で使用できる値の一部 */
-moz-appearance: none;
-moz-appearance: button;
-moz-appearance: checkbox;
-moz-appearance: scrollbarbutton-up;

/* WebKit/Blink で使用できる値の一部 */
-webkit-appearance: none;
-webkit-appearance: button;
-webkit-appearance: checkbox;
-webkit-appearance: scrollbarbutton-up;

<appearance> は、以下のキーワードのいずれかです:

デモ 説明
none 特別なスタイル付けは適用されません (デフォルト)。ただし、バグ 649849 および バグ 605985 に注意してください。
button 要素がボタンのように描画されます。
button-arrow-down  
button-arrow-next  
button-arrow-previous  
button-arrow-up  
button-bevel  
button-focus  
caret  
checkbox 要素がチェックボックスのように描画されます。実際の "checkbox" 部分のみを含みます。
checkbox-container 要素がチェックボックスのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとチェックボックスを含みます。
checkbox-label  
checkmenuitem  
dualbutton  
groupbox  
listbox  
listitem  
menuarrow  
menubar  
menucheckbox  
menuimage  
menuitem 要素がメニュー項目としてスタイル付けられます。項目にマウスカーソルを合わせると強調されます。
menuitemtext  
menulist  
menulist-button 要素が開くことのできる menulist を示すボタンとしてスタイル付けられます。
menulist-text  
menulist-textfield 要素が menulist のテキストフィールドとしてスタイル付けられます。(Windows プラットフォームでは実装していません)
menupopup  
menuradio  
menuseparator  
meterbar Firefox 16 の新機能
meterchunk Firefox 16 の新機能
progressbar 要素が進捗バーのようにスタイル付けられます。
progressbar-vertical  
progresschunk  
progresschunk-vertical  
radio 要素がラジオボタンのように描画されます。実際の "radio button" 部分のみを含みます。
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 Mac OS Xのみ。ツールバーとタイトルバーが、Mac OS X 10.4以降のアプリケーションで共通の Unified Toolbar スタイルで描画されます。
-moz-win-borderless-glass Windows Vista 以降。このスタイルは要素に Aero Glass 効果を適用しますが、ボーダーがありません。
-moz-win-browsertabbar-toolbox Windows Vista 以降。このツールボックススタイルは、ブラウザのタブバーに使用されることを想定しています。
-moz-win-communicationstext  
-moz-win-communications-toolbox Windows Vista 以降。このツールボックススタイルは、コミュニケーションと生産性アプリケーションに使用されることを想定しています。対応する前面色は -moz-win-communicationstext です。
-moz-win-exclude-glass Windows Vista 以降。このスタイルは、要素に Aero Glass 効果を適用させないために使用します。
-moz-win-glass Windows Vista 以降。このスタイルは要素にAero Glass効果を適用します。
-moz-win-mediatext  
-moz-win-media-toolbox Windows Vista 以降。このツールボックススタイルは、メディアオブジェクトを管理するアプリケーションに使用されることを想定しています。対応する前面色は -moz-win-mediatext です。
-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  

形式構文

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

.exampleone {
  -moz-appearance: toolbarbutton;
}

仕様

appearance プロパティは現在、どの CSS 仕様にも存在していません。

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 1.0 (1.7 or earlier)-moz[1] 未サポート ? 3.0-webkit
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? 1.0 (1.0) 11.0-webkit[2] ? ?

[1] 完全にはサポートしていません。

[2] 値 nonebuttontextfield のみサポートしています。MSDN のドキュメントをご覧ください。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, malayaleecoder, teoli, ethertank, Piro, Marsf
 最終更新者: yyss,