appearance

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

appearance は CSS のプロパティで、オペレーティングシステムのテーマに基づいた、プラットフォーム固有のスタイル設定で UI 要素を表示するために使用します。

試してみましょう

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

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

構文

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

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

/* <compat-auto> 値は 'auto' と同じ効果がある */
appearance: button;
appearance: checkbox;

以下のキーワードでは、ユーザーエージェントは要素に基づいて適切なスタイル設定を選択します。 いくつかの例を指定しましたが、リストは完全ではありません。

none

select要素に掲載されている、リストが展開されたことを示す矢印など、ウィジェットの特定の機能を非表示にします。

auto

特別なスタイル設定のない要素に対しては none として動作します。

<compat-special>

menulist-button または textfield のどちらかです。 これらの値はどちらも、特別なスタイル設定のない要素では auto と等価です。

<compat-auto>

利用可能な値は button, checkbox, listbox, menulist, meter, progress-bar, push-button, radio, searchfield, slider-horizontal, square-button, textarea です。 古いブラウザーとの互換性を保つための auto に相当するキーワードです。

標準外のキーワード

以下の値は -moz-appearance-webkit-appearance 接頭辞を利用して過去のブラウザーで動作可能ですが、標準の appearance プロパティにはないものです。

標準外の値
  • Firefox の項目は -moz-appearance で対応していることを示します。
  • 下記の Chrome、Edge、Safari の項目は、 -webkit-appearance ベンダー接頭辞プロパティで使用する値のリリースバージョン対応を示しています。
  • アスタリスク (*) が付いた値は、除去される意図が明確であることを示します。
  • それぞれのセルにはブラウザーのバージョンと値があります。
    • Y{version}: {version} を含むそれ以降で対応していることを示します
    • N{version}: 対応は {version} より前のリリースで取り除かれました
    • 空のセルは、対応が追加されていないことを表します
Safari Firefox Chrome Edge
attachment Y(13.1)
borderless-attachment Y(13.1)
button-bevel Y(13.1) N(75) N(80)
caps-lock-indicator Y(13.1) N(80)
caret Y(13.1) N(75) Y(73) N(80)
checkbox-container N(75)
checkbox-label N(75)
checkmenuitem N(75)
color-well Y(13.1)
continuous-capacity-level-indicator Y(13.1)
default-button Y(13.1) N(80)
discrete-capacity-level-indicator Y(13.1)
inner-spin-button Y(13.1) N(75) Y(118) * Y(119)
image-controls-button Y(13.1)
list-button Y(13.1)
listitem Y(13.1) N(75) Y(73) N(80)
media-enter-fullscreen-button Y(13.1) Y(73)
media-exit-fullscreen-button Y(13.1) Y(73)
media-fullscreen-volume-slider Y(13.1)
media-fullscreen-volume-slider-thumb Y(13.1)
media-mute-button Y(13.1) N(80)
media-play-button Y(13.1) N(80)
media-overlay-play-button Y(13.1) Y(73)
media-return-to-realtime-button Y(13.1)
media-rewind-button Y(13.1)
media-seek-back-button Y(13.1) N(73)
media-seek-forward-button Y(13.1) N(73)
media-toggle-closed-captions-button Y(13.1) Y(73)
media-slider Y(13.1) Y(117) Y(80)
media-sliderthumb Y(13.1) Y(117) Y(80)
media-volume-slider-container Y(13.1) Y(73)
media-volume-slider-mute-button Y(13.1)
media-volume-slider Y(13.1) Y(117) Y(80)
media-volume-sliderthumb Y(13.1) Y(117) Y(80)
media-controls-background Y(13.1) Y(73)
media-controls-dark-bar-background Y(13.1)
media-controls-fullscreen-background Y(13.1) Y(73)
media-controls-light-bar-background Y(13.1)
media-current-time-display Y(73)
media-time-remaining-display Y(13.1) Y(73)
menulist-text Y(13.1) N(75) Y(73) N(80)
menulist-textfield Y(13.1) N(75) Y(73) N(80)
meterbar Y(100)
number-input Y(75)
progress-bar-value Y(13.1) Y(73)
progressbar Y(100)
progressbar-vertical Y(75)
range Y(75)
range-thumb Y(75)
rating-level-indicator Y(13.1)
relevancy-level-indicator Y(13.1)
scale-horizontal Y(75)
scalethumbend Y(75)
scalethumb-horizontal Y(75)
scalethumbstart Y(75)
scalethumbtick Y(75)
scalethumb-vertical Y(75)
scale-vertical Y(75)
scrollbarthumb-horizontal Y(75)
scrollbarthumb-vertical Y(75)
scrollbartrack-horizontal Y(75)
scrollbartrack-vertical Y(75)
searchfield-decoration Y(13.1) N(80)
searchfield-results-decoration Y(13.1) N(75) N(73) N(80)
searchfield-results-button Y(13.1) N(80)
searchfield-cancel-button Y(13.1) N(75) Y(118) * Y(119)
snapshotted-plugin-overlay Y(13.1)
sheet
slider-vertical Y(118) * Y(119)
sliderthumb-horizontal Y(117) Y(80)
sliderthumb-vertical Y(117) Y(80)
textfield-multiline Y(100)
-apple-pay-button Y(13.1)

公式定義

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

形式文法

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

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

<compat-special> =
textfield |
menulist-button

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

次の例は、チェックボックスと select 要素から既定のスタイルを除去し、独自のスタイルを適用する方法を示しています。 チェックボックスの外観を円に変更し、 select 要素はリストが展開されることを示す矢印を除去する方法を示しています。

HTML

html
<input type="checkbox" />
<input type="checkbox" checked />

<select>
  <option>default</option>
  <option>option 2</option>
</select>
<select class="none">
  <option>appearance: none</option>
  <option>option 2</option>
</select>

CSS

css
input {
  appearance: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  background: red;
}
input:checked {
  border-radius: 50%;
  background: green;
}

select {
  border: 1px solid black;
  font-size: 1em;
}

select.none {
  appearance: none;
}

結果

仕様書

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
appearance
auto
button
checkbox
listbox
menulist
menulist-button
meter
none
progress-bar
radio
searchfield
textarea
textfield

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報