CSS-свойство `appearance`

Свойство appearance CSS задаёт отображаемый вид элементов заменяемых виджетов пользовательского интерфейса, например элементов управления формы. Чаще всего такие элементы оформляются в соответствии с темой операционной системы и получают нативный стиль, зависящий от платформы, либо примитивный вид, стили которого можно переопределить с помощью 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</button>
  </div>
</section>

input,
button {
  appearance: inherit;
}

Синтаксис

/* CSS Basic User Interface Module Level 4 values */
appearance: none;
appearance: auto;
appearance: menulist-button;
appearance: textfield;
appearance: base-select;

/* Global values */
appearance: inherit;
appearance: initial;
appearance: revert;
appearance: revert-layer;
appearance: unset;

/* <compat-auto> values have the same effect as 'auto' */
appearance: button;
appearance: checkbox;

Значения

Свойство appearance можно применять ко всем элементам и псевдоэлементам, но эффект заданного значения, если он есть, зависит от элемента, к которому оно применяется.

none

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

auto

Задаёт интерактивным виджетам отображение в нативном для ОС виде. Для элементов, не имеющих нативного стиля ОС, ведёт себя как 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

Отображает логотип Apple Pay, если задано для элемента <button>, <a> или <input> типа button или reset.

Описание

Свойство appearance позволяет отображать элементы в нативном для ОС стиле, соответствующем теме операционной системы, а также удалять любое нативное для платформы оформление с помощью значения none. Задание appearance: none или иное изменение внешнего вида виджетов пользовательского интерфейса не меняет функциональность элемента.

Хотя большинство элементов документа можно полностью стилизовать с помощью CSS, элементы управления пользовательского интерфейса (виджеты) обычно отображаются браузером с использованием нативных стилей пользовательского интерфейса операционной системы. Этот нативный вид различается в разных операционных системах и браузерах. В таком состоянии по умолчанию возможности стилизации виджетов с помощью CSS ограничены или отсутствуют. Элементы с таким нативным видом пользовательского интерфейса определены в HTML.

Свойство appearance позволяет управлять внешним видом HTML-виджетов, которые по умолчанию выглядят как нативные элементы управления операционной системы. В частности, значение none подавляет некоторые нативные особенности внешнего вида виджета. В результате он приобретает примитивный вид, который можно стилизовать с помощью CSS, сохраняя функциональность и поддержку нативного взаимодействия с пользователем.

Некоторые виджеты полностью исчезают, если задать им значение appearance: none. Однако скрытые элементы управления по-прежнему интерактивны. Например, щелчок по элементу <label>, связанному с флажком appearance: none, переключит состояние флажка.

Поскольку none может скрыть виджет, добавляется значение base, позволяющее задавать виджетам базовый внешний вид. При поддержке этого значения base гарантирует, что виджеты сохранят нативный вид, и при этом CSS можно будет использовать для изменения стилей виджета, которые нельзя изменить по умолчанию. В отличие от none, из-за которого переключатели и флажки могут исчезнуть, base придаёт виджету примитивный вид с пригодными для использования и совместимыми между браузерами стилями по умолчанию, а также позволяет в значительной степени настраивать его с помощью CSS. Это значение base пока не поддерживается, однако многие значения <compat-auto> обеспечивают похожие возможности, но предназначены для конкретных типов и не являются универсальными.

Настраиваемые элементы select

Значение base-select, применяемое только к элементу <select> и псевдоэлементу ::picker(select), позволяет стилизовать элементы <select> и средство выбора (содержащее элементы <option>). Средство выбора отображается на верхнем слое, подобно всплывающему окну. Если задано base-select, средство выбора можно позиционировать относительно элемента select (или других элементов), используя возможности якорного позиционирования CSS. Кроме того, значение base-select не позволяет <select> отображаться за пределами окна браузера или запускать встроенные компоненты мобильной операционной системы. Его размер также больше не определяется шириной самого широкого элемента <option>.

Дополнительную информацию см. в разделе Настраиваемые элементы select.

Непрефиксные нестандартные значения

До стандартизации свойства с префиксами -moz-appearance и -webkit-appearance позволяли отображать элементы в виде таких виджетов, как кнопки или флажки. В устаревших таблицах стилей могут встречаться следующие нестандартные значения, чаще всего в качестве значений псевдоэлементов с префиксом компонентов shadow DOM.

Авторам рекомендуется использовать только стандартные ключевые слова.

Формальное определение

Формальный синтаксис

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

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

<compat-special> = 
  textfield |
  menulist-button

Примеры

Базовый пример

В этом примере показано базовое использование свойства appearance, изменяющего внешний вид элемента <input> в некоторых браузерах.

HTML

Мы добавляем два элемента управления формы number и соответствующие им подписи.

<p>
  <label>Enter a number: <input type="number" min="0" max="10" /></label>
</p>
<p>
  <label
    >Enter a number: <input type="number" min="0" max="10" class="text"
  /></label>
</p>

CSS

Мы задаём элементу с классом text вид текстового поля.

.text {
  appearance: textfield;
}

Результаты

В зависимости от браузера, если элемент управления отображается как текстовое поле, индикатор прокрутки может визуально исчезнуть. Свойство appearance не влияет на функциональность: например, хотя щёлкнуть по индикатору прокрутки уже нельзя, клавиши со стрелками вверх и вниз по-прежнему увеличивают и уменьшают значение.

Значение appearance — none

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

HTML

Мы добавляем пары флажков, переключателей и элементов <select> вместе с соответствующими подписями:

<label><input type="checkbox" /> Default unchecked </label>
<label><input type="checkbox" checked /> Default checked </label>

<hr />

<label><input type="radio" name="radio" /> Default unchecked </label>
<label><input type="radio" name="radio" checked /> Default checked </label>

<hr />

<label
  >Unstyled select
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</label>

<label
  >Styled select
  <select class="none">
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</label>

CSS

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

Мы применяем стили к обоим элементам <input> типа checkbox; эти стили создают красный квадрат, если элемент можно стилизовать. Мы задаём appearance: none для состояния пользовательского интерфейса :checked всех элементов input (checkbox и radio), а также элементов с классом .none. Это удаляет все стили переключателя и флажка, кроме отступов, и позволяет применять любые заданные стили. Для переключателей и элементов <select> не предусмотрены альтернативные стили на случай, если задано none.

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

Результат

Значение appearance: none позволяет стилизовать элементы пользовательского интерфейса, но также может привести к тому, что виджет станет невидимым. Непомеченный флажок, у которого значение appearance по умолчанию равно auto, выглядит как обычный флажок. Задание appearance: none для состояния :checked позволяет стилизовать его.

Как и непомеченный флажок, непомеченный переключатель выглядит как нативный элемент пользовательского интерфейса, потому что он им и является. В отмеченном состоянии, когда применено appearance: none, переключатель исчезает; его функциональность сохраняется, и на отображение страницы влияют только его отступы.

Настройка внешнего вида элемента select

С помощью свойства appearance можно включить пользовательскую функциональность элемента select и стилизовать элемент <select> и его средство выбора — часть элемента управления формы, которая появляется поверх страницы.

HTML

Мы добавляем три элемента <select> с одинаковым набором дочерних элементов <option>. Как и для каждого элемента <select>, мы также добавляем связанные элементы <label>. В третьем варианте содержится больше текста, чтобы показать влияние base-select на ширину элемента <select>:

<label for="ice-cream1"
  >Default flavor:
  <select id="ice-cream1">
    <option>Asparagus</option>
    <option>Dulce de leche</option>
    <option>Pistachio, rum raisin, and coffee</option>
  </select>
</label>
<label for="ice-cream2"
  >Base select flavor:
  <select id="ice-cream2" class="baseSelect">
    <option>Asparagus</option>
    <option>Dulce de leche</option>
    <option>Pistachio, rum raisin, and coffee</option>
  </select>
</label>
<label for="ice-cream3"
  >Menulist button flavor:
  <select id="ice-cream3" class="menulistButton">
    <option>Asparagus</option>
    <option>Dulce de leche</option>
    <option>Pistachio, rum raisin, and coffee</option>
  </select>
</label>

CSS

Мы выбираем средства выбора всех элементов <select> с помощью псевдоэлемента ::picker() с параметром select. Для всех средств выбора и одного элемента <select> мы задаём значение appearance, равное base-select. Для последнего элемента <select> задаём значение menulist-button. Для первого элемента <select> по умолчанию используется состояние auto:

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

label {
  display: block;
}

Мы задаём значения свойствам background-color и border элементов <select> и их средств выбора, чтобы продемонстрировать эффект значений appearance:

select {
  border: 1px solid red;
  background-color: orange;
}

::picker(select) {
  background-color: yellow;
  border: none;
}

Результаты

Стили background-color и border заданы для всех элементов <select> и их средств выбора, однако стили ::picker(select) влияют только на средство выбора, для которого и у элемента select, и у самого средства выбора свойство appearance задано в значение base-select. Первый и третий элементы select выглядят одинаково, потому что menulist-button — это ключевое слово для совместимости.

Обратите внимание: по умолчанию строчный размер элемента <select> обычно совпадает со строчным размером элемента <option>, содержащего больше всего текста. При открытии раскрывающееся средство выбора отображается поверх страницы и не ограничивается окружающим содержимым, поэтому оно полностью видно. После задания base-select это уже не так.

Спецификации

Совместимость с браузерами

См. также

• prefers-color-scheme