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 | ユーザーがテキストを選択できるかどうかを指定する |