Свойство CSS appearance

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

Свойства -webkit-appearance и -moz-appearance — это проприетарные вендорные расширения, применяющие платформенную стилизацию на основе темы операционной системы. Они не входят в официальную спецификацию W3C CSS и поддерживаются преимущественно браузерами на базе WebKit (Safari, Chrome) и Gecko (Firefox) соответственно.

Если это свойство используется на сайтах, его следует тестировать с осторожностью. Реализация свойства appearance может существенно различаться, особенно в старых браузерах. В более новых браузерах различия незначительны.

Внимание

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

Начальное значение	normal
Применяется к	Всем элементам.
Наследуется	Нет.
Анимируемое	Да.
Версия	CSS3
DOM Syntax	object.style.appearance = "none";

Когда использовать `appearance`

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

Оборотная сторона — ответственность. Нативные элементы управления бесплатно предоставляют кольца фокуса, поведение клавиатуры и платформенные соглашения. Как только вы убираете нативный вид, вы должны самостоятельно воссоздать визуальные состояния (фокус, отмечен, отключён), иначе элемент станет непонятным и недоступным. По этой причине:

Используйте appearance: none, когда вам действительно нужен кастомный элемент управления и вы готовы обрабатывать его состояния и доступность.
Для быстрой смены цвета (цвета галочки или заливки флажка, переключателя или ползунка диапазона) предпочтите свойство accent-color — оно сохраняет нативную доступность и требует значительно меньше кода.

Синтаксис

Синтаксис свойства CSS appearance

appearance: none | auto | initial | inherit | icon | window | button | menu | field | desktop | workspace | document | tooltip | dialogue | push-button | hyperlink | radio-button | checkbox | menu-item | tab | menubar | outline-tree | range | signature | password;

Примечание

Только none и auto широко поддерживаются в современных браузерах. Остальные значения в основном устарели или нестандартны.

Пример: кастомный флажок

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .custom-checkbox input[type="checkbox"] {
        -webkit-appearance: none; /* remove default appearance on Webkit-based browsers */
        -moz-appearance: none; /* remove default appearance on Mozilla-based browsers */
        appearance: none; /* remove default appearance on all other browsers */
        width: 20px;
        height: 20px;
        border: 2px solid #333;
        border-radius: 3px;
        outline: none;
        cursor: pointer;
        margin-right: 10px;
      }

      .custom-checkbox input[type="checkbox"]:checked + label::before {
        content: "\2714"; /* Unicode checkmark symbol */
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        color: #fff;
        background-color: #333;
        border-radius: 2px;
        margin-right: 8px;
      }
    </style>
  </head>
  <body>
    <span class="custom-checkbox">
      <input type="checkbox" id="myCheckbox" name="myCheckbox" />
      <label for="myCheckbox">Checkbox</label>
    </span>
  </body>
</html>

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

Как это работает:

appearance: none (с префиксами -webkit- и -moz- для старых браузеров) убирает стандартное отображение флажка, чтобы мы могли стилизовать его самостоятельно.
Блок флажка получает ширину и высоту 20px, сплошную рамку 2px и border-radius 3px для скруглённых углов. Установка outline в none убирает стандартное кольцо фокуса (в реальном коде замените его на собственный видимый стиль фокуса для обеспечения доступности).
Когда флажок отмечен, псевдоэлемент ::before соседнего <label> вставляет символ Unicode-галочки (\2714) внутрь тёмного блока, используя белый цвет текста, чтобы галочка выделялась на background-color.

Примечание

Для простой настройки цвета элементов форм современный CSS рекомендует использовать свойство accent-color вместо appearance: none. Оно требует меньше кода и сохраняет нативные функции доступности.

Пример: кастомный выпадающий список select

Очень распространённое применение appearance: none — удаление стандартной стрелки и оформления у <select>, чтобы добавить собственную стрелку через фоновое изображение и управлять отступами и рамкой.

<!DOCTYPE html>
<html>
  <head>
    <title>Custom select</title>
    <style>
      select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        padding: 8px 32px 8px 12px;
        border: 1px solid #888;
        border-radius: 6px;
        background-color: #fff;
        /* a small SVG chevron as the dropdown arrow */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M2 4l4 4 4-4" stroke="%23333" fill="none" stroke-width="2"/></svg>');
        background-repeat: no-repeat;
        background-position: right 12px center;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <select>
      <option>Choose a fruit</option>
      <option>Apple</option>
      <option>Banana</option>
      <option>Cherry</option>
    </select>
  </body>
</html>

Без appearance: none браузер сохраняет нативную стрелку выпадающего списка и надёжно заменить её невозможно. После её удаления cursor и кастомная стрелка полностью под вашим контролем.

Значения

Примечание

Только none и auto являются стандартными и широко поддерживаемыми. Остальные значения в основном устарели или нестандартны в современных браузерах.

Значение	Описание
none	Убирает всю платформенную стилизацию. Примечание: начальным значением фактически является `normal`, а не `none`.
auto	Пользовательский агент выбирает подходящую специальную стилизацию на основе элемента. Ведёт себя как `none` на элементах без специальной стилизации.
icon	Небольшое изображение, представляющее объект, часто с именем или подписью.
window	Область просмотра, обрамлённая поверхность для отображения объектов и содержимого для просмотра и взаимодействия пользователем.
button	Небольшой объект, обычно с текстовой подписью, представляющий действие пользователя.
menu	Набор вариантов для выбора пользователем, возможно несколько одновременно. Существует несколько специфических типов меню.
field	Область для ввода или редактирования значения пользователем, как правило с помощью клавиатуры. Существует несколько специальных полей.
desktop	Окно, представляющее систему в целом, часто содержащее другие окна.
workspace	Окно, представляющее проект или приложение, которое может содержать другие окна, как правило с заголовком, отображающим имя проекта или приложения.
document	Окно, представляющее пользовательский документ, как правило с заголовком, отображающим его имя. Может также использоваться для представления папок или каталогов в файловой системе.
tooltip	Окно, используемое для временного отображения информации или подсказки об объекте. В системных цветах CSS2 также называется «info».
dialogue	Окно для отображения уведомления или вариантов выбора в рамках действия пользователя. В системных шрифтах CSS2 также называется «message-box».
push-button	Кнопка с рамкой вокруг, часто скошенной для создания трёхмерного вида, как будто она приподнята. В системных шрифтах CSS2 также называется «caption».
hyperlink	Кнопка, представляющая гипертекстовую ссылку, часто в виде обычного подчёркнутого текста, возможно другого цвета.
radio-button	Кнопка, отображающая состояние отмеченности с помощью небольшого круга рядом с подписью. Когда кнопка отмечена, внутри круга может быть диск. Неопределённое состояние может обозначаться другим графическим элементом внутри круга.
checkbox	Элемент отображается как флажок, включая только саму часть «флажка».
menu-item	Вариант выбора в меню, который также может служить подписью для вложенного (иерархического) меню.
tab	Кнопка, представляющая подпись панели в интерфейсе с вкладками.
menubar	Меню из меню, как правило расположенных линейно в горизонтальной полосе.
outline-tree	Меню, в котором варианты можно отображать или скрывать с помощью небольших виджетов, часто представленных треугольником или знаками плюс и минус.
range	Элемент управления, отображающий текущий параметр, возможно графически, и позволяющий пользователю выбирать другие значения, например перетаскиванием ползунка.
signature	Поле для ввода подписи.
password	Поле для ввода пароля. Как правило, текст отображается в виде набора точек или квадратов, чтобы скрыть значение.
initial	Устанавливает для свойства значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Связанные свойства

outline — восстановите видимый индикатор фокуса после удаления нативной стилизации.
border-radius — скруглите углы кастомных элементов управления.
cursor — сигнализируйте об интерактивности перестилизованных элементов управления.
::before и content — добавьте галочки и иконки в кастомные элементы управления.
CSS3 properties — обзор набора функций CSS3, к которому относится appearance.

Практика

Каков функционал свойства CSS appearance?

Оно используется для изменения стандартной системной стилизации элементов форм.Оно используется для изменения цвета фона страницы.Оно автоматизирует процесс валидации форм.Оно предоставляет способ применения нативной стилизации на основе платформы пользователя.Оно используется для создания анимаций в CSS.

Когда использовать appearance

Синтаксис

Пример: кастомный флажок

Пример: кастомный выпадающий список select

Значения

Связанные свойства

Практика

Когда использовать `appearance`