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

appearance は CSS のプロパティで、 OS のテーマに基づいたプラットフォームネイティブのスタイル付けを使用して要素を表示するために使用されます。-moz-appearance および -webkit-appearance はこのプロパティの標準外のバージョンで、(それぞれ) Gecko (Firefox) と Webkit ベース (Safari など) や Blink ベース (Chrome、Opera など) のブラウザーで同じことを実現するために使用されます。なお、 Firefox や Edge もまた、互換性の理由から -webkit-appearance に対応しています。

試してみましょう

-moz-appearance プロパティは XUL スタイルシート内で、プラットフォーム固有のカスタムウィジェットをデザインするために頻繁に使用されていました。また、 Mozilla プラットフォームに搭載するウィジェットの XBL 実装でも使用されていました。Gecko/Firefox 80 以降では、これらの使い方は -moz-default-appearance に変更され、内部スタイルシートの外では使用するべきではなくなりました。

メモ: ウェブサイトでこのプロパティを使いたいのであれば、とても注意深くテストする必要があります。現在のブラウザーのほとんどは対応していますが、その実装は大きく異なります。古いブラウザーでは、 none キーワードであっても、ブラウザーによってフォーム要素すべてに同じ効果があるわけではなく、まったく対応していないものもあります。最新のブラウザーでは、その差は小さくなっています。

構文

/* CSS 基本ユーザーインターフェイス Level 4 の値 */
appearance: none;
appearance: auto;
appearance: menulist-button;
appearance: textfield;

/* "Compat-auto" の値は 'auto' と同じ効果 */
appearance: button;
appearance: searchfield;
appearance: textarea;
appearance: push-button;
appearance: slider-horizontal;
appearance: checkbox;
appearance: radio;
appearance: square-button;
appearance: menulist;
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;

/* グローバル値 */
appearance: inherit;
appearance: initial;
appearance: revert;
appearance: unset;

値

標準キーワード

値	ブラウザー	説明
`none`	Firefox Chrome Safari Edge	特別なスタイルは適用されません。これが既定です。
`auto`	Firefox Chrome	ユーザーエージェントが要素に基づいて適切で特別なスタイルを選択します。特別なスタイルがない要素では `none` として動作します。
`menulist-button`	Firefox Chrome Safari Edge	この要素がメニューリストを開くことができるようなボタンとしてのスタイルになります。
`textfield`	Firefox Chrome Safari Edge
以下の値は `auto` と同等のものとして扱われます。
`button`	Firefox Chrome Safari Edge	この要素がボタンのように表示されます。
`checkbox`	Firefox Chrome Safari Edge	この要素がチェックボックスのように表示されます。実際の「チェックボックス」の部分のみが含まれます。
`listbox`	Firefox Chrome Safari Edge
`menulist`	Firefox Chrome Safari Edge
`meter`	Chrome Safari Firefox
`progress-bar`	Chrome Safari Firefox
`push-button`	Chrome Safari Edge
`radio`	Firefox Chrome Safari Edge	この要素がラジオボタンのように表示されます。実際の「ラジオボタン」の部分のみが含まれます。
`searchfield`	Firefox Chrome Safari Edge
`slider-horizontal`	Chrome Safari Edge
`square-button`	Chrome Safari Edge
`textarea`	Firefox Chrome Safari Edge

標準外のキーワード

以下の値は接頭辞つきのプロパティのみで実装されていますが、標準の appearance プロパティにはないものです。

値	ブラウザー	説明
`attachment`	Safari
`borderless-attachment`	Safari
`button-bevel`	Firefox Chrome Safari Edge
`caps-lock-indicator`	Safari Edge
`caret`	Firefox Chrome Safari Edge
`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
`inner-spin-button`	Firefox Chrome Safari
`image-controls-button`	Safari
`list-button`	Safari	データリスト
`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
`menulist-text`	Firefox Chrome Safari Edge
`menulist-textfield`	Firefox Chrome Safari Edge	この要素がメニューリストのテキストフィールドとしてスタイル付けされます。 (Windows プラットフォームでは実装されていません)
`meterbar`	Firefox	代わりに `meter` を使用してください。
`number-input`	Firefox
`progress-bar-value`	Chrome Safari
`progressbar`	Firefox	この要素がプログレスバーのようにスタイル付けされます。代わりに `progress-bar` を使用してください。
`progressbar-vertical`	Firefox
`range`	Firefox
`range-thumb`	Firefox
`rating-level-indicator`	Safari
`relevancy-level-indicator`	Safari
`scale-horizontal`	Firefox
`scalethumbend`	Firefox
`scalethumb-horizontal`	Firefox
`scalethumbstart`	Firefox
`scalethumbtick`	Firefox
`scalethumb-vertical`	Firefox
`scale-vertical`	Firefox
`scrollbarthumb-horizontal`	Firefox
`scrollbarthumb-vertical`	Firefox
`scrollbartrack-horizontal`	Firefox
`scrollbartrack-vertical`	Firefox
`searchfield-decoration`	Safari Edge
`searchfield-results-decoration`	Chrome Safari Edge	(Windows 7 の Chrome 51 で動作)
`searchfield-results-button`	Safari Edge
`searchfield-cancel-button`	Chrome Safari Edge
`snapshotted-plugin-overlay`	Safari
`sheet`	None
`slider-vertical`	Chrome Safari Edge
`sliderthumb-horizontal`	Chrome Safari Edge
`sliderthumb-vertical`	Chrome Safari Edge
`textfield-multiline`	Firefox	代わりに `textarea` を使用してください。
`-apple-pay-button`	Safari	iOS および macOS のみ。ウェブでは iOS 10.1 および macOS 10.12.1 から使用可能。

公式定義

初期値	`none`
適用対象	すべての要素
継承	なし
計算値	指定通り
アニメーションの種類	離散値

形式文法

appearance = 
  none              |
  auto              |
  <compat-auto>     |
  <compat-special>  

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

<compat-special> = 
  textfield        |
  menulist-button

例

メニューリストボタンのように見える要素を作成

.exampleone {
-webkit-appearance: menulist-button;
   -moz-appearance: menulist-button;
        appearance: menulist-button;
}

独自のスタイル付けの適用

HTML

<p><input type="checkbox" id="check"><label for="check">同意します</label></p>

CSS

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  vertical-align: middle;
}

input[type="checkbox"] {
  border: 2px solid #555;
  width: 20px;
  height: 20px;
  padding: 4px;
}
input[type="checkbox"]:checked {
  background: #555;
  background-clip: content-box;
}
label {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 -2px 8px;
}

結果

仕様書

Specification
CSS Basic User Interface Module Level 4 # appearance-switching

ブラウザーの互換性

BCD tables only load in the browser