appearance

標準化以前は、このプロパティによって、ボタンやチェックボックスのような要素をウィジェットとして表示できました。しかし、これは誤った機能であると考えられ、現在では標準的なキーワードのみを使用することが推奨されています。

以下のキーワードでは、ユーザーエージェントは要素に基づいて適切なスタイル設定を選択します。 いくつかの例を指定しましたが、リストは完全ではありません。

none

select要素に掲載されている、リストが展開されたことを示す矢印など、ウィジェットの特定の機能を非表示にします。

auto

特別なスタイル設定のない要素に対しては none として動作します。

<compat-special>

menulist-button または textfield のどちらかです。 これらの値はどちらも、特別なスタイル設定のない要素では auto と等価です。

<compat-auto>

利用可能な値は button, checkbox, listbox, menulist, meter, progress-bar, push-button, radio, searchfield, slider-horizontal, square-button, textarea です。 古いブラウザーとの互換性を保つための auto に相当するキーワードです。

標準外のキーワード

以下の値は -moz-appearance や -webkit-appearance 接頭辞を利用して過去のブラウザーで動作可能ですが、標準の appearance プロパティにはないものです。

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

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

<compat-special> = 
  textfield        |
  menulist-button  

次の例は、チェックボックスと select 要素から既定のスタイルを除去し、独自のスタイルを適用する方法を示しています。 チェックボックスの外観を円に変更し、 select 要素はリストが展開されることを示す矢印を除去する方法を示しています。

HTML

<input type="checkbox" />
<input type="checkbox" checked />

<select>
  <option>default</option>
  <option>option 2</option>
</select>
<select class="none">
  <option>appearance: none</option>
  <option>option 2</option>
</select>

CSS

input {
  appearance: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  background: red;
}
input:checked {
  border-radius: 50%;
  background: green;
}

select {
  border: 1px solid black;
  font-size: 1em;
}

select.none {
  appearance: none;
}

結果

• prefers-color-scheme