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

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

-webkit-appearance プロパティは、 WebKit ベースのブラウザー (Safari など) と Blink ベースのブラウザー (Chrome, Opera など) で同じことを実現するために使用されます。なお、 Firefox や 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 Firefox 64 で削除
button-arrow-next  Firefox Firefox 64 で削除
button-arrow-previous  Firefox Firefox 64 で削除
button-arrow-up  Firefox Firefox 64 で削除
button-bevel  Firefox Chrome Safari Edge  
button-focus  Firefox Firefox 64 で削除
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 Firefox 64 で削除
groupbox  Firefox Firefox 64 で削除
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 Firefox 64 で削除
menubar  Firefox Firefox 64 で削除
menucheckbox  Firefox Firefox 64 で削除
menuimage  Firefox Firefox 64 で削除
menuitem  Firefox Firefox 64 で削除。要素がメニュー項目としてスタイル付けられます。項目にマウスカーソルを合わせると強調されます。
menuitemtext  Firefox Firefox 64 で削除
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 Firefox 64 で削除
menuradio  Firefox Firefox 64 で削除
menuseparator  Firefox Firefox 64 で削除
meter Chrome Safari Firefox Firefox 64 で追加
meterbar  Firefox Firefox 16 の新機能。代わりに meter を使用のこと
meterchunk  Firefox Firefox 16 で追加。 Firefox 64 で削除。
number-input  Firefox  
progress-bar Chrome Safari Firefox Firefox 64 で追加
progress-bar-value  Chrome Safari  
progressbar  Firefox 要素が進捗バーのようにスタイル付けられます。代わりに progress-bar を使用のこと
progressbar-vertical  Firefox  
progresschunk  Firefox Firefox 64 で削除
progresschunk-vertical  Firefox Firefox 64 で削除
push-button  Chrome Safari Edge  
radio  Firefox Chrome Safari Edge 要素がラジオボタンのように描画されます。実際の "radio button" 部分のみを含みます。
radio-container  Firefox 要素がラジオボタンのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとラジオボタンを含みます。
radio-label  Firefox Firefox 64 で削除
radiomenuitem  Firefox Firefox 64 で削除
range  Firefox  
range-thumb  Firefox  
rating-level-indicator  Safari  
resizer  Firefox Firefox 63 で削除
resizerpanel  Firefox Firefox 63 で削除
scale-horizontal  Firefox  
scalethumbend  Firefox  
scalethumb-horizontal  Firefox  
scalethumbstart  Firefox  
scalethumbtick  Firefox  
scalethumb-vertical  Firefox  
scale-vertical  Firefox  
scrollbarbutton-down  Firefox Firefox 63 で削除
scrollbarbutton-left  Firefox Firefox 63 で削除
scrollbarbutton-right  Firefox Firefox 63 で削除
scrollbarbutton-up  Firefox Firefox 63 で削除
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 Firefox 64 で削除
sheet  None  
slider-horizontal  Chrome Safari Edge  
slider-vertical  Chrome Safari Edge  
sliderthumb-horizontal  Chrome Safari Edge  
sliderthumb-vertical  Chrome Safari Edge  
spinner  Firefox Firefox 64 で削除
spinner-downbutton  Firefox Firefox 64 で削除
spinner-textfield  Firefox Firefox 64 で削除
spinner-upbutton  Firefox Firefox 64 で削除
splitter  Firefox Firefox 64 で削除
square-button  Chrome Safari Edge  
statusbar  Firefox Firefox 64 で削除
statusbarpanel  Firefox Firefox 64 で削除
tab  Firefox Firefox 64 で削除
tabpanel  Firefox Firefox 64 で削除
tabpanels  Firefox Firefox 64 で削除
tab-scroll-arrow-back  Firefox Firefox 64 で削除
tab-scroll-arrow-forward  Firefox Firefox 64 で削除
textarea Firefox Chrome Safari Edge  
textfield  Firefox Chrome Safari Edge  
textfield-multiline  Firefox 代わりに textarea を使用のこと
toolbar  Firefox Firefox 64 で削除
toolbarbutton  Firefox Firefox 64 で削除
toolbarbutton-dropdown  Firefox Firefox 64 で削除
toolbargripper  Firefox Firefox 64 で削除
toolbox  Firefox Firefox 64 で削除
tooltip  Firefox Firefox 64 で削除
treeheader  Firefox Firefox 64 で削除
treeheadercell  Firefox Firefox 64 で削除
treeheadersortarrow  Firefox Firefox 64 で削除
treeitem  Firefox Firefox 64 で削除
treeline  Firefox Firefox 64 で削除
treetwisty  Firefox Firefox 64 で削除
treetwistyopen  Firefox Firefox 64 で削除
treeview  Firefox Firefox 64 で削除
relevancy-level-indicator  Safari  
-moz-win-borderless-glass  Firefox Firefox 64 で削除。このスタイルは要素に Aero Glass 効果を適用しますが、境界がありません。
-moz-win-browsertabbar-toolbox  Firefox Firefox 64 で削除。このツールボックススタイルは、ブラウザーのタブバーに使用されることを想定しています。
-moz-win-communicationstext  Firefox Firefox 64 で削除
-moz-win-communications-toolbox  Firefox Firefox 64 で削除。このツールボックススタイルは、コミュニケーションと生産性アプリケーションに使用されることを想定しています。対応する前面色は -moz-win-communicationstext です。
-moz-win-exclude-glass  Firefox Firefox 64 で削除。このスタイルは、要素に Aero Glass 効果を適用させないために使用します。
-moz-win-glass  Firefox Firefox 64 で削除。このスタイルは要素に Aero Glass 効果を適用します。
-moz-win-media-toolbox  Firefox Firefox 64 で削除。このツールボックススタイルは、メディアオブジェクトを管理するアプリケーションに使用されることを想定しています。対応する前面色は -moz-win-mediatext です。
-moz-window-button-box  Firefox Firefox 64 で削除
-moz-window-button-box-maximized  Firefox Firefox 64 で削除
-moz-window-button-close  Firefox Firefox 64 で削除
-moz-window-button-maximize  Firefox Firefox 64 で削除
-moz-window-button-minimize  Firefox Firefox 64 で削除
-moz-window-button-restore  Firefox Firefox 64 で削除
-moz-window-frame-bottom  Firefox Firefox 64 で削除
-moz-window-frame-left  Firefox Firefox 64 で削除
-moz-window-frame-right  Firefox Firefox 64 で削除
-moz-window-titlebar  Firefox Firefox 64 で削除
-moz-window-titlebar-maximized  Firefox Firefox 64 で削除
-apple-pay-button  Safari iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1

形式文法

none | auto | button | textfield | <compat>

where
<compat> = searchfield | textarea | push-button | button-bevel | slider-horizontal | checkbox | radio | square-button | menulist | menulist-button | listbox | meter | progress-bar

次のようにすると、要素を Firefox のツールバーボタンのように見せます。

.exampleone {
  -moz-appearance: toolbarbutton;
}

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

仕様書

仕様書 状態 備考
CSS Basic User Interface Module Level 4
appearance の定義
草案 初回定義
初期値auto
適用対象すべての要素
継承なし
メディアすべて
計算値指定値
アニメーションの種類個別
正規順序構文通り

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
appearance
実験的
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- のベンダー接頭辞が必要
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 部分対応 1
接頭辞付き
部分対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 部分対応 1.0
接頭辞付き
部分対応 1.0
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
auto
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
button
実験的
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 未対応 なしOpera 完全対応 15Safari 完全対応 3WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
<compat> (compatibility values searchfield, textarea, push-button, button-bevel, slider-horizontal, checkbox, radio, square-button, menulist, menulist-button, listbox, meter, progress-bar)
実験的
Chrome 完全対応 1Edge 部分対応 12Firefox 部分対応 1IE 未対応 なしOpera 完全対応 15Safari 完全対応 3WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 部分対応 4Opera Android 完全対応 14Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
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 完全対応 18Firefox Android 部分対応 4
補足
部分対応 4
補足
補足 Doesn't work with <input type="checkbox"> and <input type="radio">.
Opera Android 完全対応 14Safari iOS 完全対応 3Samsung Internet Android 完全対応 4.0
textfield
実験的
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 未対応 なしOpera 完全対応 15Safari 完全対応 3WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

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

関連情報

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

最終更新者: mdnwebdocs-bot,