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

関連情報