CSS の -moz-appearance プロパティは、 OS のテーマに基づいたプラットフォームネイティブのスタイル付けを使用して要素を表示するために、 Gecko (Firefox) によって使用されます。
-webkit-appearance プロパティは、 WebKit ベースのブラウザー (Safari など) と Blink ベースのブラウザー (Chrome, Opera など) で同じことを実現するために使用されます。なお、 Firefox や Edge もまた、互換性の理由から -webkit-appearance に対応しています。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
このプロパティは 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 |
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 |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 指定値 |
| アニメーションの種類 | 個別 |
ブラウザーの互換性
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
appearance | Chrome
完全対応
84
| Edge
完全対応
84
| Firefox
完全対応
80
| IE 未対応 なし | Opera
完全対応
70
| Safari
部分対応
3
| WebView Android
完全対応
84
| Chrome Android
完全対応
84
| Firefox Android
完全対応
80
| Opera Android
完全対応
60
| Safari iOS
部分対応
1
| Samsung Internet Android
部分対応
1.0
|
auto | Chrome 完全対応 83 | Edge 完全対応 83 | Firefox 完全対応 80 | IE 未対応 なし | Opera 完全対応 69 | Safari 未対応 なし | WebView Android 完全対応 83 | Chrome Android 完全対応 83 | Firefox Android 完全対応 80 | Opera Android 完全対応 59 | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 13.0 |
<compat-auto> (compatibility values searchfield, textarea, push-button, slider-horizontal, checkbox, radio, square-button, menulist, listbox, meter, progress-bar, button) | Chrome
完全対応
83
| Edge
完全対応
83
| Firefox
完全対応
80
| IE 未対応 なし | Opera
完全対応
69
| Safari 部分対応 3 | WebView Android
完全対応
83
| Chrome Android
完全対応
83
| Firefox Android
完全対応
80
| Opera Android
完全対応
59
| Safari iOS 部分対応 1 | Samsung Internet Android 部分対応 1.0 |
menulist-button | Chrome
完全対応
83
| Edge
完全対応
83
| Firefox
完全対応
80
| IE 未対応 なし | Opera
完全対応
69
| Safari 部分対応 3 | WebView Android
完全対応
83
| Chrome Android
完全対応
83
| Firefox Android
完全対応
80
| Opera Android
完全対応
59
| Safari iOS 部分対応 1 | Samsung Internet Android 部分対応 1.0 |
none | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox
完全対応
54
| IE 未対応 なし | Opera 完全対応 15 | Safari 完全対応 3 | WebView Android 完全対応 1 | Chrome Android 完全対応 18 | Firefox Android
完全対応
54
| Opera Android 完全対応 14 | Safari iOS 完全対応 3 | Samsung Internet Android 完全対応 1.0 |
textfield | Chrome
完全対応
83
| Edge
完全対応
83
| Firefox
完全対応
80
| IE 未対応 なし | Opera
完全対応
69
| Safari 部分対応 3 | WebView Android
完全対応
83
| Chrome Android
完全対応
83
| Firefox Android
完全対応
80
| Opera Android
完全対応
59
| Safari iOS 部分対応 1 | Samsung Internet Android 部分対応 1.0 |
凡例
- 完全対応
- 完全対応
- 部分対応
- 部分対応
- 未対応
- 未対応
- 実装ノートを参照してください。
- 実装ノートを参照してください。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
関連情報
- CSS 3 Basic User Interface での
appearanceの定義 (2004-05-11より Candidate Recommendation)。 - UI 仕様 4 から削除された CSS3 機能