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

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

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

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

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

構文

/* 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;

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

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

デモ ブラウザー 説明
none All 特別なスタイルは適用されません。これが既定です。
button Firefox Chrome 要素がボタンのように描画されます。
button-arrow-down Firefox  
button-arrow-next Firefox  
button-arrow-previous Firefox  
button-arrow-up Firefox  
button-bevel Firefox Chrome  
       
button-focus Firefox  
caret Firefox Chrome  
checkbox Firefox Chrome 要素がチェックボックスのように描画されます。実際の "checkbox" 部分のみを含みます。
checkbox-container Firefox 要素がチェックボックスのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとチェックボックスを含みます。
checkbox-label Firefox  
checkmenuitem Firefox  
dualbutton Firefox  
groupbox Firefox  
inner-spin-button   Chrome  
listbox Firefox Chrome  
listitem Firefox Chrome  
media-enter-fullscreen-button   Chrome  
media-exit-fullscreen-button   Chrome  
media-mute-button   Chrome  
media-play-button   Chrome  
media-overlay-play-button   Chrome  
media-toggle-closed-captions-button   Chrome  
media-slider   Chrome  
media-sliderthumb   Chrome  
media-volume-slider-container   Chrome  
media-volume-slider   Chrome  
media-volume-sliderthumb   Chrome  
media-controls-background   Chrome  
media-controls-fullscreen-background   Chrome  
media-current-time-display   Chrome  
media-time-remaining-display   Chrome  
menuarrow Firefox  
menubar Firefox  
menucheckbox Firefox  
menuimage Firefox  
menuitem Firefox 要素がメニュー項目としてスタイル付けられます。項目にマウスカーソルを合わせると強調されます。
menuitemtext Firefox  
menulist Firefox Chrome  
menulist-button Firefox Chrome 要素が開くことのできる menulist を示すボタンとしてスタイル付けられます。
menulist-text Firefox Chrome  
menulist-textfield Firefox Chrome 要素が menulist のテキストフィールドとしてスタイル付けられます。 (Windows プラットフォームでは実装されていません)
menupopup Firefox  
menuradio Firefox  
menuseparator Firefox  
meter   Chrome  
meterbar Firefox Firefox 16 の新機能
meterchunk Firefox Firefox 16 の新機能
progress-bar   Chrome  
progress-bar-value   Chrome  
progressbar Firefox 要素が進捗バーのようにスタイル付けられます。
progressbar-vertical Firefox  
progresschunk Firefox  
progresschunk-vertical Firefox  
push-button   Chrome  
radio Firefox Chrome 要素がラジオボタンのように描画されます。実際の "radio button" 部分のみを含みます。
radio-container Firefox 要素がラジオボタンのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとラジオボタンを含みます。
radio-label Firefox  
radiomenuitem Firefox  
range Firefox  
range-thumb Firefox  
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  
searchfield-cancel-button   Chrome  
separator Firefox  
sheet Firefox  
slider-horizontal   Chrome  
slider-vertical   Chrome  
sliderthumb-horizontal   Chrome  
sliderthumb-vertical   Chrome  
spinner Firefox  
spinner-downbutton Firefox  
spinner-textfield Firefox  
spinner-upbutton Firefox  
splitter Firefox  
square-button   Chrome  
statusbar Firefox  
statusbarpanel Firefox  
tab Firefox  
tabpanel Firefox  
tabpanels Firefox  
tab-scroll-arrow-back Firefox  
tab-scroll-arrow-forward Firefox  
textarea   Chrome  
textfield Firefox Chrome  
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  
-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     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)
適用対象すべての要素
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1 -webkit- 12 -webkit- 1 -moz- なし15 -webkit- 3 -webkit-
none112

54

11

なし153
auto なし なし なし なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応1 -webkit- 18 -webkit- 12 -webkit- 4 -moz- 14 -webkit- 3 -webkit- 4.0 -webkit-
none11812411434.0
auto なし なし なし なし なし なし なし

1. Doesn’t work with <input type="checkbox"> and <input type="radio">.

関連情報

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

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