вид

До стандартизации это свойство позволяло отображать элементы как виджеты, такие как кнопки или флажки. Оно считалось нежелательным, и авторам рекомендуется использовать только стандартные ключевые слова.

Для следующих ключевых слов пользовательский агент выбирает соответствующую стилизацию, основанную на элементе. Приведены некоторые примеры, но список не является исчерпывающим.

none

Скрывает определенные функции виджетов, такие как стрелка, отображаемая в элементе выбора, показывающая, что список можно развернуть.

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  

В следующем примере показано, как удалить стиль по умолчанию из флажка и элемента выбора, а также применить пользовательский стиль. Внешний вид флажка изменен на круг, а элемент выбора показывает, как удалить стрелку, указывающую на то, что список можно развернуть.

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