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

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 実装でも使用されます。

/* 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 | 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 3 Basic User Interface での appearance の定義 (2004-05-11より Candidate Recommendation)。
• UI 仕様 4 から削除された CSS3 機能