appearance:ブラウザが独自に描画する標準的なUIをCSSで変更できるようにする

初期値 none
適用対象 全ての要素
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

appearanceプロパティの説明

appearanceは、ブラウザが独自に描画する標準的なUIをCSSで変更できるようにするプロパティです。例えば、ボタンやセレクタなどのブラウザによって見た目が異なる<form>の部品に対して、デザインをリセットしてCSSで再定義する際などに用いられます。

このプロパティには、標準外に-moz-appearanceおよび-webkit-appearanceのベンダープレフィックスが用意されています。

appearanceに指定できる値

none
特別なスタイルは適用されません。これが初期値です。
auto
ブラウザが用意した特別なスタイルを適用します。特に無い場合は、noneと同じ扱いになります。
menulist-button
対応しているブラウザは、メニューリストを開くボタンのスタイルを適用します。
textfield
対応しているブラウザでは、テキストフィールドのスタイルを適用します。
button
autoと同じ扱いになります。
checkbox
autoと同じ扱いになります。
listbox
autoと同じ扱いになります。
menulist
autoと同じ扱いになります。
meter
autoと同じ扱いになります。
progress-bar
autoと同じ扱いになります。
push-button
autoと同じ扱いになります。
radio
autoと同じ扱いになります。
searchfield
autoと同じ扱いになります。
slider-horizontal
autoと同じ扱いになります。
square-button
autoと同じ扱いになります。
textarea
autoと同じ扱いになります。

appearanceの使い方とサンプル

appearanceプロパティの構文は以下の通りです。

CSS
/* 基本UI */
appearance: none;
appearance: auto;
appearance: menulist-button;
appearance: textfield;

/* "auto" と同じ効果 */
appearance: button;
appearance: checkbox;
appearance: listbox;
appearance: menulist;
appearance: meter;
appearance: progress-bar;
appearance: push-button;
appearance: radio;
appearance: searchfield;
appearance: slider-horizontal;
appearance: square-button;
appearance: textarea;

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

appearanceの実例

それでは、実際にappearanceプロパティの書き方を見ていきましょう。<form>関連のパーツに適用されているブラウザ既定のスタイルを独自のものに変更した場合、以下のように表示されます。

CSS
.samp_box {
	margin-top: 10px;
}
.ap_auto {
	appearance: auto;
	-webkit-appearance: auto;
	-moz-appearance: auto;
}
.ap_none {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding: 2px;
	width: 1.2em;
	height: 1.2em;
	border: 1px solid #666666;
	vertical-align: middle;
}
.ap_none:checked {
	background: #ff22cc;
	background-clip: content-box;
}
HTML
<div class="samp_box">
	<label><input type="checkbox" class="ap_auto">auto</label>
	<label><input type="checkbox" class="ap_none">独自UI</label>
</div>
<div class="samp_box">
	<label><input type="radio" class="ap_auto">auto</label>
	<label><input type="radio" class="ap_none">独自UI</label>
</div>
表示確認

appearanceに関連するCSSプロパティ

要素の装飾や描画指定
accent-color 一部の要素の強調色を指定する
all 要素の全てのプロパティを初期化する
appearance ブラウザが独自に描画する標準的なUIをCSSで変更できるようにする
caret-color テキストの挿入位置や選択補助として表示されるキャレットの色を指定する
cursor マウスポインタのカーソルの種類を指定する
filter 画像やテキストにフィルタ効果を与える
isolation 要素のスタッキング・コンテキストを制御する
mix-blend-mode 重なり合った要素の内容と背景に対して描画モードを指定する
opacity 要素の不透明度を指定する
scroll-behavior スクロールが発生した場合の挙動を指定する
user-select ユーザーがテキストを選択できるかどうかを指定する