CSS Reference

appearance

ウィジェットをブラウザ標準のスタイルで表示するかを指定する

ウェブページに配置された、ほとんどの要素の見え方は、CSS によって完全に制御することができますが、入力コントロール（フォームの入力欄やセレクトメニューなど）の一部ウィジェットは、ユーザーエージェント（ブラウザ）によって独自に定義された標準的なユーザーインターフェース（UI）としてレンダリングされます。

例えば、セレクトメニューに対して、自動的にリストが開閉することを示す矢印アイコンが付与されたり、ラジオボタンやチェックボックスが、特に制作者側で独自にスタイルを指定しなくても、利用者が使用している OS や ブラウザなどの UI で標準的に使われている同様の機能と類似の見た目で表示されるのはこのためです。

appearance プロパティは、このユーザーエージェントが独自に定義する UI の描写を制御します。例えば、appearance: none; を指定することで、ユーザーエージェントが独自に定義する見た目を排除し、制作者が独自に指定したスタイルで見た目をコントロールしやすくします。

ただし、ウェブサイトの利用者は、標準的な UI のデザインに慣れており、そこからあまりにかけ離れたデザイン、例えば「セレクトメニューに見えないセレクトメニュー」、「チェックボックスに見えないチェックボックス」、といった UI は利用者を混乱させる可能性があります。

原則としてはブラウザが標準で適用するデザインが最もわかりやすく、利用者にとって混乱がない、ということを前提に、appearance プロパティの使用や、制作者独自のスタイル指定を考えるべきです。

指定できる値は下記の通りです。

none ユーザーエージェントが独自に定義する見た目を排除します。（既定値）
auto ユーザーエージェントが独自に定義する見た目が適用されます。もともとユーザーエージェントが独自に定義する見た目を持たない要素については none として動作します。
<compat-auto> searchfield、textarea、checkbox、radio、menulist、listbox、meter、progress-bar、button いずれかの値です。
これら値は後方互換性のために存在するもので、すべて auto と同じ扱いとなります。
<compat-special> textfield、menulist-button どちらかの値です。
この2つの値は後方互換性のために存在するもので、auto と同じ扱いとなりますが、ユーザーエージェントによってはこれら値を考慮してレンダリングする場合があります。

appearanceの仕様

初期値
  • none
対象となる要素
  • すべての要素
継承
  • なし

appearanceのサンプルソース

input[type=checkbox] {
  appearance: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  background: red;
}
input[type=checkbox]:checked {
  border-radius: 50%;
  background: green;
}
input[type=checkbox]:focus-visible {
  outline: auto;
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome