appearance

appearance は CSS のプロパティで、フォームコントロールなどの置換された UI ウィジェット要素のレンダリングされた外観を指定します。最も一般的な場合、これらの要素にはオペレーティングシステムのテーマに基づくネイティブでプラットフォーム特定のスタイルが適用されるか、 CSS を使用して上書き可能なスタイルによる基本的な外観が指定されます。

試してみましょう

appearance: auto;

appearance: none;

appearance: textfield;

<section id="default-example">
 <div class="background" id="example-element">
 <input type="search" value="search" aria-label="unlabeled search" />
 <input type="checkbox" aria-label="unlabeled checkbox" />
 <input type="radio" aria-label="unlabeled radio button" />
 <button>ボタン</button>
 </div>
</section>

input,
button {
 appearance: inherit;
}

構文

/* CSS 基本ユーザーインターフェイス Level 4 の値 */
appearance: none;
appearance: auto;
appearance: menulist-button;
appearance: textfield;
appearance: base-select;
/* グローバル値 */
appearance: inherit;
appearance: initial;
appearance: revert;
appearance: revert-layer;
appearance: unset;
/* <compat-auto> 値は 'auto' と同じ効果がある */
appearance: button;
appearance: checkbox;

値

appearance プロパティはすべての要素および擬似要素に適用できますが、指定された値の効果(ある場合)は、それが適用される要素によって異なります。

none

ウィジェットに基本的な外観を与え、 CSS によるスタイル設定を可能にします。ただし、ウィジェットのネイティブ機能は維持されます。この値はウィジェット以外の要素には影響しません。

auto

対話型ウィジェットを OS ネイティブの外観でレンダリングするように設定します。 OS ネイティブのスタイル設定が適用されていない要素では none と同様に動作します。

base-select

<select> 要素および ::picker(select) 擬似要素にのみ関連し、それらのスタイル設定ができるようにします。

<compat-special>

特定の要素に対して auto と同様の効果を持ちます。

textfield

特定の <input> 型の外観が現れるようにして、text 型の外観と一致させます。

menulist-button

<select> 要素に設定する形で使用された場合、ドロップダウンピッカーのスタイルは既定の状態のものと一致します。

<compat-auto>

利用可能な値は button, checkbox, listbox, menulist, meter, progress-bar, push-button, radio, searchfield, slider-horizontal, square-button, textarea です。 すべての値は auto と同様に動作します。代わりに auto を使用してください。

標準外の値

一部のブラウザーでは、 標準外の値にも対応しています。

slider-vertical

<input type="range"> 要素に適用すると、スライダーを縦方向にします。垂直スライダーを作成するには、代わりに writing-mode を vertical-lr に、 direction を rtl に設定する必要があります。

-apple-pay-button

<button>、<a>、<input> 要素で表示型が button または reset に設定されている場合に、Apple Pay のロゴを表示します。

解説

appearance プロパティは、オペレーティングシステムのテーマに基づいて要素を OS ネイティブスタイルで表示することを可能にします。また、 none 値を指定することでプラットフォーム固有のスタイル設定を無効化できます。 appearance: none を設定したり、 UI ウィジェットの外観を変更したりしても、要素の機能は変わりません。

文書内のほとんどの要素は CSS で完全にスタイル設定できますが、 UI コントロール(ウィジェット)は通常、ブラウザーがオペレーティングシステムのネイティブ UI スタイルを使用してレンダリングされます。このネイティブな外観は、オペレーティングシステムやブラウザーによって異なります。この既定の状態で、ウィジェットは CSS でスタイル設定できる機能が限られており、場合によっては全くありません。どの要素がこのネイティブ UI の外観を持つかは HTML で定義されています。

appearance プロパティは、既定ではネイティブ OS コントロールと同様に見える HTML ウィジェットの外観をコントロールします。特に none 値はウィジェットのネイティブ外観の一部を抑制します。これにより、機能性を維持しつつネイティブユーザー操作に対応しながら、 CSS でスタイル設定可能な基本的な外観が実現されます。

一部のウィジェットは appearance: none に設定すると完全に消えます。ただし、非表示のコントロールは依然としてインタラクティブです。例えば、 appearance: none のチェックボックスに関連付けられた <label> をクリックすると、チェックボックスのチェック状態が切り替わります。

none はウィジェットを非表示にする可能性があるため、ウィジェットに基本外観を指定された base 値が追加されました。対応している場合、 base 値はウィジェットがネイティブ外観を維持しつつ、既定では変更できないウィジェットのスタイルを CSS で変更できるように確実にします。 none がラジオボタンやチェックボックスを消失させる可能性があるのに対し、 base はウィジェットに基本的な外観を与え、使用可能かつ相互運用性のある既定のネイティブスタイルを提供すると同時に、 CSS による良くカスタマイズを可能にします。この base 値はまだ対応していないものの、多くの <compat-auto> 値が同様の機能を果たします。ただしこれらは特定の型に属し、グローバルではありません。

base-select 値は、 <select> 要素および ::picker(select) 擬似要素にのみ関連し、<select> 要素と選択ピッカーのスタイル設定をすることができるのです (<option> 要素を含む)。ピッカーはポップオーバーと同様に最前面レイヤーに描画されます。 base-select が設定されている場合、 CSS アンカー位置指定機能を使用して、ピッカーを選択要素(または他の要素)に対して相対的に配置できます。さらに、 base-select 値を設定すると、 <select> がブラウザーペイン外にレンダリングされたり、組み込みのモバイル OS 要素が起動することを防ぎます。また、最も幅の広い <option> の幅に基づいてサイズが調整されることもなくなりました。

接頭辞付きの標準外の値

標準化以前、接頭辞付きプロパティである -moz-appearance および -webkit-appearance により、要素をボタンやチェックボックスなどのウィジェットとして示すことができるようになりました。古いスタイルシートでは、以下の標準外の値が使用されていることがあります。最も一般的なのは、シャドウ DOM 要素の接頭辞付き擬似要素の値としてです。

製作者は標準キーワードのみを使用することが推奨されます。

公式定義

形式文法

appearance = 
 none | 
 auto | 
 base | 
 base-select | 
 <compat-auto> | 
 <compat-special> | 
 base 

<compat-auto> = 
 searchfield | 
 textarea | 
 checkbox | 
 radio | 
 menulist | 
 listbox | 
 meter | 
 progress-bar | 
 button 

<compat-special> = 
 textfield | 
 menulist-button 

例

基本的な例

この例は、 appearance プロパティの基本的な使用法を示し、一部のブラウザーで <input> 要素の外観を変更します。

HTML

2 つの number おのフォームコントロールとそのラベルを記載します。

<p>
 <label>番号を入力: <input type="number" min="0" max="10" /></label>
</p>
<p>
 <label
 >番号を入力: <input type="number" min="0" max="10" class="text"
 /></label>
</p>

CSS

クラス名 text をつけた要素を、テキストフィールドの見た目同様に設定します。

.text {
 appearance: textfield;
}

結果

ブラウザーによっては、コントロールがテキストフィールドと同様に設定されている場合、スピナーが視覚的に除去されることがあります。 appearance プロパティは機能に影響を及ぼしません。例えば、クリック可能なスピナーが存在しなくなっても、上下のカーソルキーで値を増減させることが可能です。

外見を none に設定

次の例は、チェックボックス、ラジオボタン、 <select> 要素から既定のスタイルを削除し、独自のスタイル設定を適用する方法を示しています。

HTML

チェックボックス、ラジオボタン、<select>要素と、それらに関連付けられたラベルのペアを記述します。

<label><input type="checkbox" /> 既定で未チェック </label>
<label><input type="checkbox" checked /> 既定でチェック </label>
<hr />
<label><input type="radio" name="radio" /> 既定で未チェック </label>
<label><input type="radio" name="radio" checked /> 既定でチェック </label>
<hr />
<label
 >スタイル設定されていない select
 <select>
 <option>選択肢 1</option>
 <option>選択肢 2</option>
 </select>
</label>
<label
 >スタイル設定された select
 <select class="none">
 <option>選択肢 1</option>
 <option>選択肢 2</option>
 </select>
</label>

CSS

label {
 display: block;
 margin: 0.5em 0;
}

両方の <input> 要素(checkbox 型)にスタイルを適用します。これらのスタイルは、要素がスタイル設定可能な場合に赤い四角形を作成します。すべての入力要素(checkbox および radio)の :checked UI 状態、ならびに .none クラスを持つ要素に対して appearance: none を設定します。これにより、マージン以外のラジオボタンとチェックボックスのスタイルがすべて除去され、設定されたスタイルが適用できる状態になります。ラジオボタンや <select> 要素に対して、 none が設定された場合の代替スタイルはありません。

[type="checkbox"] {
 width: 1em;
 height: 1em;
 display: inline-block;
 background: red;
}
input:checked,
.none {
 appearance: none;
}

結果

appearance: none を設定すると、 UI の要素のスタイル設定できるようになりますが、ウィジェットが非表示になるリスクも発生します。チェックされていないチェックボックスは、appearance が既定で auto であるため、チェックボックスのように見えます。 :checked 状態で appearance: none を設定することで、スタイル設定することができる。

チェックされていないラジオボタンは、チェックされていないチェックボックスと同様に、ネイティブ UI ウィジェットのように見えます。なぜなら、それ自体がネイティブ UI ウィジェットであるからです。チェック状態のときに appearance: none を適用すると、ラジオボタンは現れなくなります。その機能は維持され、ページのレンダリングに影響を与えるのはマージンだけです。

select の外見を設定

appearance プロパティを使用することができます。これにより、独自の選択機能の有効化を選択できます。これにより、 <select> 要素とそのピッカー(ページから飛び出すフォームコントロールの一部を表す)のスタイル設定が可能になります。

HTML

3 つの <select> 要素を記載し、それぞれに複数の <option> 子要素があります。すべての <select> と同様に、関連付けられた <label> 要素も含まれています。 3 つ目(3 番目のオプション)には、 base-select が <select> の幅に与える効果を示すために、より多くのテキストが含まれています。

<label for="ice-cream1"
 >既定のフレーバー:
 <select id="ice-cream1">
 <option>アスパラガス</option>
 <option>ダルセ・デ・レチェ</option>
 <option>ピスタチオ、ラムレーズン、コーヒー</option>
 </select>
</label>
<label for="ice-cream2"
 >ベース select のフレーバー:
 <select id="ice-cream2" class="baseSelect">
 <option>アスパラガス</option>
 <option>ダルセ・デ・レチェ</option>
 <option>ピスタチオ、ラムレーズン、コーヒー</option>
 </select>
</label>
<label for="ice-cream3"
 >メニューリストボタンのフレーバー:
 <select id="ice-cream3" class="menulistButton">
 <option>アスパラガス</option>
 <option>ダルセ・デ・レチェ</option>
 <option>ピスタチオ、ラムレーズン、コーヒー</option>
 </select>
</label>

CSS

すべての <select> 要素のピッカーを、 ::picker() 擬似要素を select 引数付きで使用して選択します。すべてピッカーと 1 つの <select> 要素の appearance 値は base-select に設定します。最後の <select> は menulist-button に設定します。まず <select> は既定で auto 状態に設定されます。

.baseSelect,
::picker(select) {
 appearance: base-select;
}
.menulistButton {
 appearance: menulist-button;
}

label {
 display: block;
}

<select> およびピッカーの background-color と border プロパティに値を設定し、 appearance 値の効果を示します。

select {
 border: 1px solid red;
 background-color: orange;
}
::picker(select) {
 background-color: yellow;
 border: none;
}

結果

background-color および border のスタイルはすべての <select> 要素とそのピッカーに定義されていますが、::picker(select) のスタイルは、select と picker の両方に appearance プロパティが base-select に設定されている場合にのみ、そのピッカーに影響を与え、効果を及ぼします。1 つ目と 3 つ目の select ボックスが同じ見た目になるのは、 menulist-button が互換キーワードであるためです。

既定では、 <select> のインラインサイズは通常、最もテキスト量の多い <option> のインラインサイズに準じます。また、ドロップダウンピッカーは開くための操作でレンダリング済みページの上部に現れるため、周囲のページに制約されず完全に可視化されます。 base-select が設定されている場合、これらの文は真でなくなります。

仕様書

ブラウザーの互換性

関連情報

• prefers-color-scheme