これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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

-webkit-appearance プロパティは、 WebKit ベースのブラウザー (Safari など) と Blink ベースのブラウザー (Chrome, Opera など) で同じことを実現するために使用されます。なお、 Firefox 63 (今のところベータ版のみ) や Edge もまた、互換性の理由から -webkit-appearance に対応しています。

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

互換性メモ: ウェブサイトでこのプロパティを使いたいのであれば、とても注意深くテストする必要があります。現在のブラウザーのほとんどは対応していますが、その実装は大きく異なります。古いブラウザーでは、 none キーワードであっても、ブラウザーによってフォーム要素すべてに同じ効果があるわけではなく、まったく対応していないものもあります。最新のブラウザーでは、その差は小さくなっています。

構文

/* CSS 基本ユーザーインターフェイス Level 4 の値 */
appearance: none;
appearance: auto;

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

/* WebKit/Blink (Gecko や Edge も同様) で使用できる値の一部 */
-webkit-appearance: none;
-webkit-appearance: button;
-webkit-appearance: checkbox;
-webkit-appearance: scrollbarbutton-up;

-moz-appearance プロパティは、以下の一覧から一つの値を選択して指定することができます。

<appearance> は以下のキーワードのうちの一つです。

デモ ブラウザー 説明
none Firefox Chrome Safari Edge 特別なスタイルは適用されません。これが既定です。
auto なし ユーザーエージェントが要素に基づいて適切で特別なスタイルを選択します。特別なスタイルがない要素では none として動作します。
attachment Safari  
borderless-attachment Safari  
button Firefox Chrome Safari Edge 要素がボタンのように描画されます。
button-arrow-down Firefox  
button-arrow-next Firefox  
button-arrow-previous Firefox  
button-arrow-up Firefox  
button-bevel Firefox Chrome Safari Edge  
button-focus Firefox  
caps-lock-indicator Safari Edge  
caret Firefox Chrome Safari Edge  
checkbox Firefox Chrome Safari Edge 要素がチェックボックスのように描画されます。実際の "checkbox" 部分のみを含みます。
checkbox-container Firefox 要素がチェックボックスのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとチェックボックスを含みます。
checkbox-label Firefox  
checkmenuitem Firefox  
color-well Safari input type=color
continuous-capacity-level-indicator Safari  
default-button Safari Edge  
discrete-capacity-level-indicator Safari  
dualbutton Firefox  
groupbox Firefox  
inner-spin-button Firefox Chrome Safari  
image-controls-button Safari  
list-button Safari datalist
listbox Firefox Chrome Safari Edge  
listitem Firefox Chrome Safari Edge  
media-enter-fullscreen-button Chrome Safari  
media-exit-fullscreen-button Chrome Safari  
media-fullscreen-volume-slider Safari  
media-fullscreen-volume-slider-thumb Safari  
media-mute-button Chrome Safari Edge  
media-play-button Chrome Safari Edge  
media-overlay-play-button Chrome Safari  
media-return-to-realtime-button Safari  
media-rewind-button Safari  
media-seek-back-button Safari Edge  
media-seek-forward-button Safari Edge  
media-toggle-closed-captions-button Chrome Safari  
media-slider Chrome Safari Edge  
media-sliderthumb Chrome Safari Edge  
media-volume-slider-container Chrome Safari  
media-volume-slider-mute-button Safari  
media-volume-slider Chrome Safari  
media-volume-sliderthumb Chrome Safari  
media-controls-background Chrome Safari  
media-controls-dark-bar-background Safari  
media-controls-fullscreen-background Chrome Safari  
media-controls-light-bar-background Safari  
media-current-time-display Chrome Safari  
media-time-remaining-display Chrome Safari  
menuarrow Firefox  
menubar Firefox  
menucheckbox Firefox  
menuimage Firefox  
menuitem Firefox 要素がメニュー項目としてスタイル付けられます。項目にマウスカーソルを合わせると強調されます。
menuitemtext Firefox  
menulist Firefox Chrome Safari Edge  
menulist-button Firefox Chrome Safari Edge 要素が開くことのできる menulist を示すボタンとしてスタイル付けられます。
menulist-text Firefox Chrome Safari Edge  
menulist-textfield Firefox Chrome Safari Edge 要素が menulist のテキストフィールドとしてスタイル付けられます。 (Windows プラットフォームでは実装されていません)
menupopup Firefox  
menuradio Firefox  
menuseparator Firefox  
meter Chrome Safari  
meterbar Firefox Firefox 16 の新機能
meterchunk Firefox Firefox 16 の新機能
progress-bar Chrome Safari  
progress-bar-value Chrome Safari  
progressbar Firefox 要素が進捗バーのようにスタイル付けられます。
progressbar-vertical Firefox  
progresschunk Firefox  
progresschunk-vertical Firefox  
push-button Chrome Safari Edge  
radio Firefox Chrome Safari Edge 要素がラジオボタンのように描画されます。実際の "radio button" 部分のみを含みます。
radio-container Firefox 要素がラジオボタンのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとラジオボタンを含みます。
radio-label Firefox  
radiomenuitem Firefox  
range Firefox  
range-thumb Firefox  
rating-level-indicator Safari  
resizer Firefox  
resizerpanel Firefox  
scale-horizontal Firefox  
scalethumbend Firefox  
scalethumb-horizontal Firefox  
scalethumbstart Firefox  
scalethumbtick Firefox  
scalethumb-vertical Firefox  
scale-vertical Firefox  
scrollbarbutton-down Firefox  
scrollbarbutton-left Firefox  
scrollbarbutton-right Firefox  
scrollbarbutton-up Firefox  
scrollbarthumb-horizontal Firefox  
scrollbarthumb-vertical Firefox  
scrollbartrack-horizontal Firefox  
scrollbartrack-vertical Firefox  
searchfield Firefox Chrome Safari Edge  
searchfield-decoration Safari Edge  
searchfield-results-decoration Safari Edge  
searchfield-results-button Safari Edge  
searchfield-cancel-button Chrome Safari Edge  
snapshotted-plugin-overlay Safari  
separator Firefox  
sheet None  
slider-horizontal Chrome Safari Edge  
slider-vertical Chrome Safari Edge  
sliderthumb-horizontal Chrome Safari Edge  
sliderthumb-vertical Chrome Safari Edge  
spinner Firefox  
spinner-downbutton Firefox  
spinner-textfield Firefox  
spinner-upbutton Firefox  
splitter Firefox  
square-button Chrome Safari Edge  
statusbar Firefox  
statusbarpanel Firefox  
tab Firefox  
tabpanel Firefox  
tabpanels Firefox  
tab-scroll-arrow-back Firefox  
tab-scroll-arrow-forward Firefox  
textarea Chrome Safari Edge  
textfield Firefox Chrome Safari Edge  
textfield-multiline Firefox  
toolbar Firefox  
toolbarbutton Firefox  
toolbarbutton-dropdown Firefox  
toolbargripper Firefox  
toolbox Firefox  
tooltip Firefox  
treeheader Firefox  
treeheadercell Firefox  
treeheadersortarrow Firefox  
treeitem Firefox  
treeline Firefox  
treetwisty Firefox  
treetwistyopen Firefox  
treeview Firefox  
relevancy-level-indicator Safari  
-moz-win-borderless-glass Firefox Windows Vista 以降。このスタイルは要素に Aero Glass 効果を適用しますが、境界がありません。
-moz-win-browsertabbar-toolbox Firefox Windows Vista 以降。このツールボックススタイルは、ブラウザーのタブバーに使用されることを想定しています。
-moz-win-communicationstext Firefox  
-moz-win-communications-toolbox Firefox Windows Vista 以降。このツールボックススタイルは、コミュニケーションと生産性アプリケーションに使用されることを想定しています。対応する前面色は -moz-win-communicationstext です。
-moz-win-exclude-glass Firefox Windows Vista 以降。このスタイルは、要素に Aero Glass 効果を適用させないために使用します。
-moz-win-glass Firefox Windows Vista 以降。このスタイルは要素に Aero Glass 効果を適用します。
-moz-win-mediatext Firefox  
-moz-win-media-toolbox Firefox Windows Vista 以降。このツールボックススタイルは、メディアオブジェクトを管理するアプリケーションに使用されることを想定しています。対応する前面色は -moz-win-mediatext です。
-moz-window-button-box Firefox  
-moz-window-button-box-maximized Firefox  
-moz-window-button-close Firefox  
-moz-window-button-maximize Firefox  
-moz-window-button-minimize Firefox  
-moz-window-button-restore Firefox  
-moz-window-frame-bottom Firefox  
-moz-window-frame-left Firefox  
-moz-window-frame-right Firefox  
-moz-window-titlebar Firefox  
-moz-window-titlebar-maximized Firefox  
-apple-pay-button Safari iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1

形式文法

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 のツールバーボタンのように見せます。

.exampleone {
  -moz-appearance: toolbarbutton;
}

カスタムスタイリングをラジオボタンとチェックボックス適用するための appearance:none の使用例を示す例は、このJSFiddleも参照してください。

仕様書

仕様書 状態 備考
CSS Basic User Interface Module Level 4
appearance の定義
草案 初回定義

初期値none (but this value is overridden in the user agent CSS)
適用対象すべての要素
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 部分対応 1
接頭辞付き
部分対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 部分対応 12
接頭辞付き
部分対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 部分対応 1
接頭辞付き
部分対応 1
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
部分対応 62
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 62: this feature is behind the layout.css.webkit-appearance.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 部分対応 15
接頭辞付き
部分対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 部分対応 3
接頭辞付き
部分対応 3
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 部分対応 1
接頭辞付き
部分対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 部分対応 18
接頭辞付き
部分対応 18
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 部分対応 12
接頭辞付き
部分対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 部分対応 4
接頭辞付き
部分対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
部分対応 62
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 62: this feature is behind the layout.css.webkit-appearance.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 部分対応 14
接頭辞付き
部分対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 部分対応 3
接頭辞付き
部分対応 3
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 部分対応 4.0
接頭辞付き
部分対応 4.0
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
none
実験的
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 54
完全対応 54
部分対応 1
補足
補足 Doesn’t work with <input type="checkbox"> and <input type="radio">.
IE 未対応 なしOpera 完全対応 15Safari 完全対応 3WebView Android 完全対応 1Chrome Android 完全対応 18Edge Mobile 完全対応 12Firefox Android 部分対応 4
補足
部分対応 4
補足
補足 Doesn’t work with <input type="checkbox"> and <input type="radio">.
Opera Android 完全対応 14Safari iOS 完全対応 3Samsung Internet Android 完全対応 4.0
auto
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

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

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