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 マウスポインタのカーソルの種類を指定する
scrollbar-base-color スクロールバーのベースになる色を指定する
scrollbar-arrow-color スクロールバーの矢印にあたる色を指定する
scrollbar-face-color スクロールバーの表面にあたる色を指定する
scrollbar-3dlight-color スクロールバーの左端と上端にあたる色を指定する
scrollbar-highlight-color スクロールバーのハイライトにあたる色を指定する
scrollbar-shadow-color スクロールバーの影にあたる色を指定する
scrollbar-darkshadow-color スクロールバーの右端と下端にあたる色を指定する