Свойство CSS appearance

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

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

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

WARNING

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

Initial Value	normal
Applies to	All elements.
Inherited	No.
Animatable	Yes.
Version	CSS3
DOM Syntax	object.style.appearance = "none";

Синтаксис

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

css

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;

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

Пример свойства appearance:

Пример свойства CSS appearance со значением button

html

<!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>

Try it Yourself »

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

Флажок имеет ширину и высоту 20 пикселей, сплошную рамку толщиной 2 пикселя и скругление углов 3 пикселя. Мы также задаём свойству outline значение none, чтобы убрать контур, который появляется вокруг флажка при фокусе.

Чтобы показать галочку, когда флажок отмечен, мы используем псевдоэлемент ::before на соседнем <label> для создания блока содержимого с символом галочки Unicode (\2714) в качестве содержимого. Мы задаём этому блоку ширину и высоту 20 пикселей, цвет фона #333 и скругление углов 2 пикселя, чтобы он выглядел как скруглённый квадрат. Мы также устанавливаем цвет текста белым, чтобы галочка выделялась на тёмном фоне.

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

Значения

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

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

Practice

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

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

Свойство CSS appearance ​

Синтаксис ​

Пример свойства appearance: ​

Значения ​

Practice ​

Свойство CSS appearance

Синтаксис

Пример свойства appearance:

Значения

Practice