appearance

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

試してみましょう

標準化以前は、このプロパティによって、ボタンやチェックボックスのような単純な要素をウィジェットとして表示できました。 しかし、これは誤った機能であると考えられ、現在では標準的なキーワードのみを使用することが推奨されています。

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

構文

css

/* 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 select要素に表示されるリストが拡張可能であることを示す矢印など、ウィジェットの特定の機能を非表示にします。
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

標準外のキーワード

以下の値は -moz-appearance や -webkit-appearance 接頭辞を利用して過去のブラウザーで動作可能ですが、標準の 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 なし
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>

例

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

css

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

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

HTML

html

<select class="none">
  <option>appearance: none</option>
</select>
<select class="auto">
  <option>appearance: auto</option>
</select>

CSS

css

.none {
  appearance: none;
}
.auto {
  appearance: auto;
}

結果

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報