appearanceプロパティの説明
CSSのappearanceプロパティは、ブラウザが独自に描画する標準的なUIをCSSで変更できるようにするプロパティです。例えば、ボタンやセレクタなどのブラウザによって見た目が異なる<form>の部品に対して、デザインをリセットしてCSSで再定義する際などに用いられます。
このプロパティには、標準外に-moz-appearanceおよび-webkit-appearanceのベンダープレフィックスが用意されています。
appearanceに指定できる値
none- 特別なスタイルは適用されません。これが初期値です。
auto- ブラウザが用意した特別なスタイルを適用します。特に無い場合は、
noneと同じ扱いになります。 menulist-button- 対応しているブラウザは、メニューリストを開くボタンのスタイルを適用します。
textfield- 対応しているブラウザでは、テキストフィールドのスタイルを適用します。
buttonautoと同じ扱いになります。checkboxautoと同じ扱いになります。listboxautoと同じ扱いになります。menulistautoと同じ扱いになります。meterautoと同じ扱いになります。progress-barautoと同じ扱いになります。push-buttonautoと同じ扱いになります。radioautoと同じ扱いになります。searchfieldautoと同じ扱いになります。slider-horizontalautoと同じ扱いになります。square-buttonautoと同じ扱いになります。textareaautoと同じ扱いになります。
appearanceの使い方とサンプルコード
appearanceプロパティの構文は以下の通りです。
/* 基本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>関連のパーツに適用されているブラウザ既定のスタイルを独自のものに変更した場合、以下のように表示されます。
<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>
.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;
}