appearance (-moz-appearance, -webkit-appearance)

Experimental

これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

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;
appearance: button;
appearance: textfield;
appearance: searchfield;
appearance: textarea;
appearance: push-button;
appearance: button-bevel;
appearance: slider-horizontal;
appearance: checkbox;
appearance: radio;
appearance: square-button;
appearance: menulist;
appearance: menulist-button;
appearance: listbox;
appearance: meter;
appearance: progress-bar;

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

/* WebKit/Blink (Gecko や Edge も同様) で使用できる値の一部 */
-webkit-appearance: media-mute-button;
-webkit-appearance: caret;

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

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

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

形式文法

none | auto | textfield | menulist-button | <compat-auto>

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

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

.exampleone {
  -moz-appearance: toolbarbutton;
}

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

仕様書

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

初期値auto
適用対象すべての要素
継承なし
計算値指定通り
アニメーションの種類離散値

ブラウザーの互換性

BCD tables only load in the browser

関連情報