appearance

Определение и применение

Свойство appearance управляет стандартным оформлением элементов формы. Оно позволяет сохранить вид, который задаёт браузер, или снять его, чтобы нарисовать собственную рамку, фон и состояние выбора.

Как оформить поля формы и сохранить видимые состояния выбора и фокуса — в уроке «Оформление форм».

Попробуйте значения appearance

Сравните стандартный вид поля со снятым оформлением. Флажок остаётся доступным с клавиатуры; при none его выбранное состояние показано собственным CSS.

Значение свойстваappearance: auto;appearance: none;

Что меняем

appearance: auto

HTML и CSS примера

HTML

<div class="stage">
  <label
    ><input class="demo-target check" type="checkbox" checked /> Получать
    новости</label
  >
</div>

HTML

<div class="stage">
  <label
    >Время прогулки
    <select class="demo-target">
      <option>Утро</option>
      <option>Вечер</option>
    </select></label
  >
</div>

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  border: 2px solid #245a85;
  border-radius: 3px;
  padding: 4px;
  font: inherit;
  background-color: white;
  color: #172c3d;
  appearance: auto;
}
.check {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}
.check:checked {
  background-color: #245a85;
  box-shadow: inset 0 0 0 4px white;
}
.demo-target:focus-visible {
  outline: 3px solid #a13610;
  outline-offset: 3px;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  border: 2px solid #245a85;
  border-radius: 3px;
  padding: 4px;
  font: inherit;
  background-color: white;
  color: #172c3d;
  appearance: none;
}
.check {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}
.check:checked {
  background-color: #245a85;
  box-shadow: inset 0 0 0 4px white;
}
.demo-target:focus-visible {
  outline: 3px solid #a13610;
  outline-offset: 3px;
}

Поддержка браузерами

Спецификация: CSS ui

Поддерживается во всех основных браузерах с 2022 года.

Отдельные значения (4) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.appearance
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`appearance`	✓84	✓84	✓80	✓70	✓15.4	✓84	✓80	✓60	✓15.4	✓14.0	✓84	✓15.4
`auto`	✓83	✓83	✓80	✓69	✓15.4	✓83	✓80	✓59	✓15.4	✓13.0	✓83	✓15.4
`base-select`	✓135	✓135	◐149	✓120	✓27	✓135	×	✓89	✓27	✓29.0	✓135	✓27
`listbox`	✓145	✓145	×	✓129	×	✓145	×	✓96	×	×	✓145	×
Base styling for multiple dropdown: <select multiple size="1">	×	×	◐149	×	×	×	×	×	×	×	×	×
Base styling for single dropdown: <select>	✓135	✓135	◐149	✓120	✓27	✓135	×	✓89	✓27	✓29.0	✓135	✓27
`button`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`checkbox`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`listbox`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`menulist`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`menulist-button`	✓1	✓12	✓80	✓15	✓3	✓18	✓80	✓14	✓1	✓1.0	✓4.4	✓1
`meter`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`none`	✓1	✓12	✓54	✓15	✓3	✓18	✓54	✓14	✓3	✓1.0	✓4.4	✓3
`progress-bar`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`radio`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`searchfield`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`textarea`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`textfield`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
Ещё 13 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

base и base-select поддерживаются отдельно от none и auto. Проверяйте конкретное значение через @supports; старым браузерам оставляйте рабочий нативный элемент.

CSS синтаксис:

CSS

/* Основные режимы */
appearance: none | auto;

/* Базовое оформление: поддержка различается */
appearance: base | base-select;

/* Совместимые значения */
appearance: searchfield | textarea | checkbox | radio |
            menulist | listbox | meter | progress-bar | button;
appearance: textfield | menulist-button;

/* Глобальные значения */
appearance: initial | inherit | unset | revert | revert-layer;

| разделяет варианты. Значение выбирает оформление, но не меняет тип HTML-элемента.

JavaScript синтаксис:

JavaScript

element.style.appearance = "none";

Начальное значение свойства

none.

Значения свойства

Значения appearance
Значение	Описание
`none`	Убирает нативный вид. Семантика, значение и управление элементом сохраняются, но некоторые поля без собственных стилей могут стать невидимыми. Начальное значение.
`auto`	Разрешает нативное оформление, соответствующее элементу. Браузерные стили обычно задают его полям формы.
`base`	Базовый, настраиваемый через CSS вид из нового стандарта. Экспериментальная возможность, не универсальная замена `auto`.
`base-select`	Включает базовый настраиваемый вид `select` и его окна выбора при поддержке браузером.
`searchfield, textarea, checkbox, radio, menulist, listbox, meter, progress-bar, button`	Совместимые значения работают как `auto`; `appearance: checkbox` не превращает обычный `div` в флажок.
`textfield`	Для подходящего поля использует вид текстового ввода. Например, у числового поля может убрать кнопки изменения числа, сохранив его числовой тип.
`menulist-button`	Для `select` оставляет вид кнопки списка; особенности зависят от платформы.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для ненаследуемого свойства `appearance` устанавливает его начальное значение свойства.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Начальное значение и оформление браузера

initial устанавливает none, хотя нетронутый флажок выглядит нативным: его вид разрешён таблицей стилей браузера. Поэтому initial и revert дают разные результаты.

Снимая оформление, задайте вид выбранного, отключённого состояния и клавиатурного фокуса. Сохраняйте настоящий input и связанный label. Не заменяйте управление кликабельной картинкой. Если нужно изменить только цвет стандартного флажка, используйте accent-color.

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

CSS Basic User Interface — appearance.

Наследуется

Нет.

Анимируемое

Тип анимации — дискретный: значение переключается без плавных промежуточных положений.

Примеры, попробуйте сами

Собственное оформление флажка

Щёлкните подпись или выделите поле клавишей Tab и нажмите Пробел. Видны рамка, знак выбора и контур фокуса. Замените none на auto, чтобы сравнить с нативным оформлением.

base.css

CSS

body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Собственное оформление флажка</title>
  </head>
  <body>
    <label><input type="checkbox" checked /> Добавить орехи в заказ</label>
  </body>
</html>

style.css

CSS

input {
    appearance: none;
    width: 1.25em;
    height: 1.25em;
    border: 2px solid currentColor;
    vertical-align: middle;
}
input:checked::before {
    content: '✓';
    display: block;
    text-align: center;
    line-height: 1;
}
input:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 3px;
}
input:disabled {
    opacity: 0.5;
}