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

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

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

形式文法

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

例

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

.exampleone {
  -moz-appearance: toolbarbutton;
}

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

仕様書

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

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

ブラウザーの互換性

BCD tables only load in the browser

構文

値

形式文法

例

仕様書

ブラウザーの互換性

関連情報