--- title: 'appearance (-moz-appearance, -webkit-appearance)' slug: Web/CSS/appearance tags: - '-moz-appearance' - '-webkit-appearance' - CSS - CSS プロパティ - CSS 基本ユーザーインターフェイス - Reference - appearance translation_of: Web/CSS/appearance ---
{{CSSRef}}{{SeeCompatTable}}

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

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

{{EmbedInteractiveExample("pages/css/appearance.html")}}

このプロパティは 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 {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge 特別なスタイルは適用されません。これが既定です。
auto {{Experimental_Inline}} {{EmbedLiveSample("sampleAuto",100,50,"","", "nobutton")}} なし ユーザーエージェントが要素に基づいて適切で特別なスタイルを選択します。特別なスタイルがない要素では none として動作します。
attachment {{Non-standard_Inline}} {{EmbedLiveSample("sampleAttachment",100,50,"","", "nobutton")}} Safari
borderless-attachment {{Non-standard_Inline}} {{EmbedLiveSample("sample-borderless-attachment",100,50,"","","nobutton")}} Safari
button {{Non-standard_Inline}} {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge 要素がボタンのように描画されます。
button-arrow-down {{Non-standard_Inline}} {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
button-arrow-next {{Non-standard_Inline}} {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
button-arrow-previous {{Non-standard_Inline}} {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
button-arrow-up {{Non-standard_Inline}} {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
button-bevel {{Non-standard_Inline}} {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge
button-focus {{Non-standard_Inline}} {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
caps-lock-indicator {{Non-standard_Inline}} {{EmbedLiveSample("sample-caps-lock-indicator",100,50,"","","nobutton")}} Safari Edge
caret {{Non-standard_Inline}} {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge
checkbox {{Non-standard_Inline}} {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge 要素がチェックボックスのように描画されます。実際の "checkbox" 部分のみを含みます。
checkbox-container {{Non-standard_Inline}} {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}} Firefox 要素がチェックボックスのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとチェックボックスを含みます。
checkbox-label {{Non-standard_Inline}} {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}} Firefox
checkmenuitem {{Non-standard_Inline}} {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}} Firefox
color-well {{Non-standard_Inline}} {{EmbedLiveSample("sample-color-well",100,50,"","","nobutton")}} Safari input type=color
continuous-capacity-level-indicator {{Non-standard_Inline}} {{EmbedLiveSample("sample-continuous-capacity-level-indicator",100,50,"","","nobutton")}} Safari
default-button {{Non-standard_Inline}} {{EmbedLiveSample("sample-default-button",100,50,"","","nobutton")}} Safari Edge
discrete-capacity-level-indicator {{Non-standard_Inline}} {{EmbedLiveSample("sample-discrete-capacity-level-indicator",100,50,"","","nobutton")}} Safari
dualbutton {{Non-standard_Inline}} {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
groupbox {{Non-standard_Inline}} {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
inner-spin-button {{Non-standard_Inline}} {{EmbedLiveSample("sampleInnerSpinButton",100,50,"","", "nobutton")}} Firefox Chrome Safari
image-controls-button {{Non-standard_Inline}} {{EmbedLiveSample("sample-image-controls-button",100,50,"","","nobutton")}} Safari
list-button {{Non-standard_Inline}} {{EmbedLiveSample("sample-list-button",100,50,"","","nobutton")}} Safari datalist
listbox {{Non-standard_Inline}} {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge
listitem {{Non-standard_Inline}} {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge
media-enter-fullscreen-button {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaEnterFullscreenButton",100,50,"","", "nobutton")}} Chrome Safari
media-exit-fullscreen-button {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaExitFullscreenButton",100,50,"","", "nobutton")}} Chrome Safari
media-fullscreen-volume-slider {{Non-standard_Inline}} {{EmbedLiveSample("sample-media-fullscreen-volume-slider",100,50,"","","nobutton")}} Safari
media-fullscreen-volume-slider-thumb {{Non-standard_Inline}} {{EmbedLiveSample("sample-media-fullscreen-volume-slider-thumb",100,50,"","","nobutton")}} Safari
media-mute-button {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaMuteButton",100,50,"","", "nobutton")}} Chrome Safari Edge
media-play-button {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaPlayButton",100,50,"","", "nobutton")}} Chrome Safari Edge
media-overlay-play-button {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaOverlayPlayButton",100,50,"","", "nobutton")}} Chrome Safari
media-return-to-realtime-button {{Non-standard_Inline}} {{EmbedLiveSample("sample-media-return-to-realtime-button",100,50,"","","nobutton")}} Safari
media-rewind-button {{Non-standard_Inline}} {{EmbedLiveSample("sample-media-rewind-button",100,50,"","","nobutton")}} Safari
media-seek-back-button {{Non-standard_Inline}} {{EmbedLiveSample("sample-media-seek-back-button",100,50,"","","nobutton")}} Safari Edge
media-seek-forward-button {{Non-standard_Inline}} {{EmbedLiveSample("sample-media-seek-forward-button",100,50,"","","nobutton")}} Safari Edge
media-toggle-closed-captions-button {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaToggleClosedCaptionsButton",100,50,"","", "nobutton")}} Chrome Safari
media-slider {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaSlider",100,50,"","", "nobutton")}} Chrome Safari Edge
media-sliderthumb {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaSliderThumb",100,50,"","", "nobutton")}} Chrome Safari Edge
media-volume-slider-container {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaVolumeSliderContainer",100,50,"","", "nobutton")}} Chrome Safari
media-volume-slider-mute-button {{Non-standard_Inline}} {{EmbedLiveSample("sample-media-volume-slider-mute-button",100,50,"","","nobutton")}} Safari
media-volume-slider {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaVolumeSlider",100,50,"","", "nobutton")}} Chrome Safari
media-volume-sliderthumb {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaVolumeSliderThumb",100,50,"","", "nobutton")}} Chrome Safari
media-controls-background {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaControlsBackground",100,50,"","", "nobutton")}} Chrome Safari
media-controls-dark-bar-background {{Non-standard_Inline}} {{EmbedLiveSample("sample-media-controls-dark-bar-background",100,50,"","","nobutton")}} Safari
media-controls-fullscreen-background {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaControlsFullscreenBackground",100,50,"","", "nobutton")}} Chrome Safari
media-controls-light-bar-background {{Non-standard_Inline}} {{EmbedLiveSample("sample-media-controls-light-bar-background",100,50,"","","nobutton")}} Safari
media-current-time-display {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaCurrentTimeDisplay",100,50,"","", "nobutton")}} Chrome Safari
media-time-remaining-display {{Non-standard_Inline}} {{EmbedLiveSample("sampleMediaTimeRemainingDisplay",100,50,"","", "nobutton")}} Chrome Safari
menuarrow {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
menubar {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
menucheckbox {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
menuimage {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
menuitem {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除。要素がメニュー項目としてスタイル付けられます。項目にマウスカーソルを合わせると強調されます。
menuitemtext {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
menulist {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge
menulist-button {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge 要素が開くことのできる menulist を示すボタンとしてスタイル付けられます。
menulist-text {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge
menulist-textfield {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge 要素が menulist のテキストフィールドとしてスタイル付けられます。 (Windows プラットフォームでは実装されていません)
menupopup {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
menuradio {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
menuseparator {{Non-standard_Inline}} {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
meter {{EmbedLiveSample("sampleMeter",100,50,"","", "nobutton")}} Chrome Safari Firefox Firefox 64 で追加
meterbar {{Non-standard_Inline}} {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}} Firefox Firefox 16 の新機能。代わりに meter を使用のこと
meterchunk {{Non-standard_Inline}} {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}} Firefox Firefox 16 で追加。 Firefox 64 で削除。
number-input {{Non-standard_Inline}} {{EmbedLiveSample("sampleNumberInput",100,50,"","", "nobutton")}} Firefox
progress-bar {{EmbedLiveSample("sampleProgressBarWebkit",100,50,"","", "nobutton")}} Chrome Safari Firefox Firefox 64 で追加
progress-bar-value {{Non-standard_Inline}} {{EmbedLiveSample("sampleProgressBarValueWebkit",100,50,"","", "nobutton")}} Chrome Safari
progressbar {{Non-standard_Inline}} {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}} Firefox 要素が進捗バーのようにスタイル付けられます。代わりに progress-bar を使用のこと
progressbar-vertical {{Non-standard_Inline}} {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}} Firefox
progresschunk {{Non-standard_Inline}} {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
progresschunk-vertical {{Non-standard_Inline}} {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
push-button {{Non-standard_Inline}} {{EmbedLiveSample("samplePushButton",100,50,"","", "nobutton")}} Chrome Safari Edge
radio {{Non-standard_Inline}} {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge 要素がラジオボタンのように描画されます。実際の "radio button" 部分のみを含みます。
radio-container {{Non-standard_Inline}} {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}} Firefox 要素がラジオボタンのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとラジオボタンを含みます。
radio-label {{Non-standard_Inline}} {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
radiomenuitem {{Non-standard_Inline}} {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
range {{Non-standard_Inline}} {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}} Firefox
range-thumb {{Non-standard_Inline}} {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}} Firefox
rating-level-indicator {{Non-standard_Inline}} {{EmbedLiveSample("sample-rating-level-indicator",100,50,"","","nobutton")}} Safari
resizer {{Non-standard_Inline}} {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}} Firefox Firefox 63 で削除
resizerpanel {{Non-standard_Inline}} {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}} Firefox Firefox 63 で削除
scale-horizontal {{Non-standard_Inline}} {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}} Firefox
scalethumbend {{Non-standard_Inline}} {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}} Firefox
scalethumb-horizontal {{Non-standard_Inline}} {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}} Firefox
scalethumbstart {{Non-standard_Inline}} {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}} Firefox
scalethumbtick {{Non-standard_Inline}} {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}} Firefox
scalethumb-vertical {{Non-standard_Inline}} {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}} Firefox
scale-vertical {{Non-standard_Inline}} {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}} Firefox
scrollbarbutton-down {{Non-standard_Inline}} {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}} Firefox Firefox 63 で削除
scrollbarbutton-left {{Non-standard_Inline}} {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}} Firefox Firefox 63 で削除
scrollbarbutton-right {{Non-standard_Inline}} {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}} Firefox Firefox 63 で削除
scrollbarbutton-up {{Non-standard_Inline}} {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}} Firefox Firefox 63 で削除
scrollbarthumb-horizontal {{Non-standard_Inline}} {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}} Firefox
scrollbarthumb-vertical {{Non-standard_Inline}} {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}} Firefox
scrollbartrack-horizontal {{Non-standard_Inline}} {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}} Firefox
scrollbartrack-vertical {{Non-standard_Inline}} {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}} Firefox
searchfield {{Non-standard_Inline}} {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge
searchfield-decoration {{Non-standard_Inline}} {{EmbedLiveSample("sample-searchfield-decoration",100,50,"","","nobutton")}} Safari Edge
searchfield-results-decoration {{Non-standard_Inline}} {{EmbedLiveSample("sample-searchfield-results-decoration",100,50,"","","nobutton")}} Safari Edge
searchfield-results-button {{Non-standard_Inline}} {{EmbedLiveSample("sample-searchfield-results-button",100,50,"","","nobutton")}} Safari Edge
searchfield-cancel-button {{Non-standard_Inline}} {{EmbedLiveSample("sampleSearchFieldCancelButton",100,50,"","", "nobutton")}} Chrome Safari Edge
snapshotted-plugin-overlay {{Non-standard_Inline}} {{EmbedLiveSample("sample-snapshotted-plugin-overlay",100,50,"","","nobutton")}} Safari
separator {{Non-standard_Inline}} {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
sheet {{Non-standard_Inline}} {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}} None
slider-horizontal {{Non-standard_Inline}} {{EmbedLiveSample("sampleSliderHorizontal",100,50,"","", "nobutton")}} Chrome Safari Edge
slider-vertical {{Non-standard_Inline}} {{EmbedLiveSample("sampleSliderVertical",100,50,"","", "nobutton")}} Chrome Safari Edge
sliderthumb-horizontal {{Non-standard_Inline}} {{EmbedLiveSample("sampleSliderThumbHorizontal",100,50,"","", "nobutton")}} Chrome Safari Edge
sliderthumb-vertical {{Non-standard_Inline}} {{EmbedLiveSample("sampleSliderThumbVertical",100,50,"","", "nobutton")}} Chrome Safari Edge
spinner {{Non-standard_Inline}} {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
spinner-downbutton {{Non-standard_Inline}} {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
spinner-textfield {{Non-standard_Inline}} {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
spinner-upbutton {{Non-standard_Inline}} {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
splitter {{Non-standard_Inline}} {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
square-button {{Non-standard_Inline}} {{EmbedLiveSample("sampleSquareButton",100,50,"","", "nobutton")}} Chrome Safari Edge
statusbar {{Non-standard_Inline}} {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
statusbarpanel {{Non-standard_Inline}} {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
tab {{Non-standard_Inline}} {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
tabpanel {{Non-standard_Inline}} {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
tabpanels {{Non-standard_Inline}} {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
tab-scroll-arrow-back {{Non-standard_Inline}} {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
tab-scroll-arrow-forward {{Non-standard_Inline}} {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
textarea {{EmbedLiveSample("sampleTextArea",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge
textfield {{Non-standard_Inline}} {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}} Firefox Chrome Safari Edge
textfield-multiline {{Non-standard_Inline}} {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}} Firefox 代わりに textarea を使用のこと
toolbar {{Non-standard_Inline}} {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
toolbarbutton {{Non-standard_Inline}} {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
toolbarbutton-dropdown {{Non-standard_Inline}} {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
toolbargripper {{Non-standard_Inline}} {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
toolbox {{Non-standard_Inline}} {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
tooltip {{Non-standard_Inline}} {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
treeheader {{Non-standard_Inline}} {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
treeheadercell {{Non-standard_Inline}} {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
treeheadersortarrow {{Non-standard_Inline}} {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
treeitem {{Non-standard_Inline}} {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
treeline {{Non-standard_Inline}} {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
treetwisty {{Non-standard_Inline}} {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
treetwistyopen {{Non-standard_Inline}} {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
treeview {{Non-standard_Inline}} {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
relevancy-level-indicator {{Non-standard_Inline}} {{EmbedLiveSample("sample-relevancy-level-indicator",100,50,"","","nobutton")}} Safari
-moz-win-borderless-glass {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("2.0")}} {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除。このスタイルは要素に Aero Glass 効果を適用しますが、境界がありません。
-moz-win-browsertabbar-toolbox {{Non-standard_Inline}} {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除。このツールボックススタイルは、ブラウザーのタブバーに使用されることを想定しています。
-moz-win-communicationstext {{Non-standard_Inline}} {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
-moz-win-communications-toolbox {{Non-standard_Inline}} {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除。このツールボックススタイルは、コミュニケーションと生産性アプリケーションに使用されることを想定しています。対応する前面色は -moz-win-communicationstext です。
-moz-win-exclude-glass {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("6.0")}} {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除。このスタイルは、要素に Aero Glass 効果を適用させないために使用します。
-moz-win-glass {{Non-standard_Inline}} {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除。このスタイルは要素に Aero Glass 効果を適用します。
-moz-win-media-toolbox {{Non-standard_Inline}} {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除。このツールボックススタイルは、メディアオブジェクトを管理するアプリケーションに使用されることを想定しています。対応する前面色は -moz-win-mediatext です。
-moz-window-button-box {{Non-standard_Inline}} {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
-moz-window-button-box-maximized {{Non-standard_Inline}} {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
-moz-window-button-close {{Non-standard_Inline}} {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
-moz-window-button-maximize {{Non-standard_Inline}} {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
-moz-window-button-minimize {{Non-standard_Inline}} {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
-moz-window-button-restore {{Non-standard_Inline}} {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
-moz-window-frame-bottom {{Non-standard_Inline}} {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
-moz-window-frame-left {{Non-standard_Inline}} {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
-moz-window-frame-right {{Non-standard_Inline}} {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
-moz-window-titlebar {{Non-standard_Inline}} {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
-moz-window-titlebar-maximized {{Non-standard_Inline}} {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}} Firefox Firefox 64 で削除
-apple-pay-button {{Non-standard_Inline}} {{EmbedLiveSample("sampleApplePayButton",100,50,"","", "nobutton")}} Safari iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1

形式文法

{{CSSSyntax}}

例

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

.exampleone {
  -moz-appearance: toolbarbutton;
}

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

仕様書

仕様書 状態 備考
{{SpecName("CSS4 Basic UI", "#appearance-switching", "appearance")}} {{Spec2("CSS4 Basic UI")}} 初回定義

{{CSSInfo}}

ブラウザーの互換性

{{Compat("css.properties.appearance")}}

関連情報