appearance — CSS — Дока

  1. Кратко
  2. Как понять
    1. Сбрасываем внешний вид
    2. Меняем внешний вид элемента
  3. Как пишется
  4. На практике
    1. Денис Ежков советует

Кратко

Скопировано

Некоторые элементы форм имеют уникальный внешний вид в каждой операционной системе. Например, выпадающий список в macOS внешне выглядит совсем не так, как такой же выпадающий список в Windows.

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

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

Как понять

Скопировано

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

Сбрасываем внешний вид

Скопировано

Если задать appearance: none, то происходит «сброс» внешнего вида элемента. Приведение его к общему знаменателю во всех браузерах и всех операционных системах.

Например, в браузере Safari на iOS поле ввода с атрибутом type="search" принудительно стилизуется скруглёнными углами, тенями и рамками. Чтобы не перекрывать каждое свойство по отдельности, можно задать такому полю appearance: none.

Открыть демо в новой вкладке

Если пример открыть не в мобильном браузере, то разница не заметна, так как в десктопных браузерах внешний вид полей ввода более или менее унифицирован.

Меняем внешний вид элемента

Скопировано

Значение appearance, отличное от none, задаётся, чтобы применить специфичные для платформы стили к элементам, у которых этих стилей нет.

В этом случае, если нам нужно, чтобы поле ввода выглядело как поле поиска, мы можем задать appearance: searchfield

Открыть демо в новой вкладке

Как пишется

Скопировано

.element {  appearance: none;}
          .element {
  appearance: none;
}

Значение по умолчанию:

.element {  appearance: auto;}
          .element {
  appearance: auto;
}

💡

Можно заметить, что в примерах выше некоторые CSS-свойства начинаются с префиксов -moz-, -webkit или -ms-. Такие префиксы называются вендорными и используются довольно редко. Вендорными префиксами снабжаются те CSS-свойства, которые ещё официально не утверждены стандартом, либо пока не поддерживаются браузером в полной мере. Так, например, свойства с префиксом -moz- будут применяться только браузером на движке Gecko (Mozilla Firefox).

На практике

Скопировано

Денис Ежков советует

Скопировано

🛠 Сброс стандартного отображения элементов может быть полезным при применении пользовательских стилей к элементам форм:

Открыть демо в новой вкладке

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

:required

ctrl + alt + ←

→

resize

ctrl + alt + →

appearance ⚡️ HTML и CSS с примерами кода

Свойство -moz-appearance используется в Gecko (Firefox) для отображения элемента, используя базовые стили платформы на основе темы операционной системы.

Свойство -webkit-appearance используется в браузерах WebKit-based (например, Safari) и Blink-based (например, Chrome, Opera) для того же эффекта. Заметьте, что Firefox и Edge также поддерживают -webkit-appearance, для обеспечения совместимости.

Демо

Интерфейс
  • appearance
  • box-sizing
  • caret-color
  • cursor
  • outline
  • outline-width
  • outline-style
  • outline-color
  • outline-offset
  • resize
  • text-overflow
  • user-select

Синтаксис

/* CSS модуль базового интерфейса 4 уровня, значения */
appearance: none;
appearance: auto;
appearance: button;
appearance: textfield;
appearance: searchfield;
appearance: textarea;
appearance: push-button;
appearance: button-bevel;
appearance: slider-horizontal;
appearance: checkbox;
appearance: radio;
appearance: square-button;
appearance: menulist;
appearance: menulist-button;
appearance: listbox;
appearance: meter;
appearance: progress-bar;
/* Частичный список доступных значений в Gecko */
-moz-appearance: scrollbarbutton-up;
-moz-appearance: button-bevel;
/* Частичный список доступных значений в WebKit/Blink (таких как Gecko и Edge) */
-webkit-appearance: media-mute-button;
-webkit-appearance: caret;

Свойство -moz-appearance может быть указано как одно значение, выбранное из списка ниже.

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

  • CSS Basic User Interface Module Level 4

Пример

HTMLCSSРезультат

<h4>Check:</h4>
<p><input type="checkbox"></input><label>Include Options</label></p>
<h4><br/>Select one:</h4>
<p><input type="radio" name="radio"></input><label>Option A</label></p>
<p><input type="radio" name="radio"></input><label>Option B</label></p>

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  display: inline-block;
  vertical-align: middle;
}
input[type='checkbox'] {
  border: 2px solid #555;
  width: 20px;
  height: 20px;
  outline: none;
  padding: 4px;
}
input[type='checkbox']:checked {
  background: #555;
  background-clip: content-box;
}
input[type='radio'] {
  border: 2px solid #555;
  border-radius: 10px;
  width: 20px;
  height: 20px;
  outline: none;
  padding: 4px;
}
input[type='radio']:checked {
  background: #555;
  background-clip: content-box;
}
p,
h4 {
  color: #333;
  font-family: helvetica, arial;
}
label {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 -2px 8px;
}

Ссылки

  • appearance MDN (рус. )
Внешний вид

— CSS: каскадные таблицы стилей

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

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

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

 /* Базовый модуль пользовательского интерфейса CSS, уровень 4, значения */
внешний вид: нет;
внешний вид: авто;
внешний вид: меню-кнопка;
внешний вид: текстовое поле;
/* Значения «Compat-auto», которые имеют тот же эффект, что и «auto» */
внешний вид: кнопка;
внешний вид: поле поиска;
внешний вид: текстовая область;
внешний вид: кнопочный;
внешний вид: слайдер-горизонтальный;
внешний вид: флажок;
внешний вид: радио;
внешний вид: квадратная кнопка;
внешний вид: список меню;
внешний вид: список;
внешний вид: метр;
внешний вид: прогресс-бар;
/* Частичный список доступных значений в Gecko */
-moz-внешний вид: полоса прокрутки кнопкой вверх;
-моз-внешний вид: пуговица-скос;
/* Частичный список доступных значений в WebKit/Blink (а также в Gecko и Edge) */
-webkit-внешний вид: медиа-кнопка отключения звука;
-webkit-внешний вид: каретка;
/* Глобальные значения */
внешний вид: наследуй;
внешний вид: начальный;
внешний вид: реверс;
внешний вид: реверс-слой;
внешний вид: не установлен;

Значения

Стандартные ключевые слова
Значение Браузер Описание
нет Firefox Chrome Safari Edge Скрывает некоторые функции виджетов, такие как стрелка, отображаемая в элементе выбора, указывающая, что список можно расширить.
авто Firefox Chrome Edge Пользовательский агент выбирает соответствующий специальный стиль на основе элемент. Действует как нет для элементов без специального стиля.
кнопка списка меню Firefox Chrome Safari Edge
текстовое поле Firefox Chrome Safari Edge
Следующие значения считаются эквивалентными auto :
кнопка Firefox Chrome Safari Edge Элемент раньше рисовался как кнопка.
флажок Firefox Chrome Safari Edge Раньше элемент рисовался как флажок, включая только фактический часть «флажок».
список Firefox Chrome Safari Edge
список меню Firefox Chrome Safari Edge
счетчик Chrome Safari Firefox
индикатор выполнения Chrome Safari Firefox
кнопка Край Chrome Safari
радио Firefox Chrome Safari Edge Раньше элемент рисовался как радиокнопка, включая только фактический часть «радиокнопка».
поле поиска Firefox Chrome Safari Edge
слайд-горизонтальный Край Chrome Safari
квадратная кнопка
Край Chrome Safari
текстовая область Firefox Chrome Safari Edge
Нестандартные ключевые слова

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

Значение Браузер Описание
насадка Сафари
крепление без полей 		Сафари
кнопка-скос Firefox Chrome Safari Edge
Индикатор Caps Lock Край Safari
каре Firefox Chrome Safari Edge
контейнер-флажок Фаерфокс Элемент отображается как контейнер для флажка, который может включать фоновый эффект предварительной подсветки на некоторых платформах. Обычно он содержит метку и флажок.
флажок-метка Фаерфокс
элемент меню проверки Фаерфокс
Колодка для окрашивания Сафари тип ввода=цвет
индикатор уровня постоянной емкости Сафари
кнопка по умолчанию Край Safari
индикатор уровня дискретной емкости Сафари
внутренняя кнопка вращения Firefox Chrome Safari
кнопка управления изображением Сафари
кнопка-список Сафари список данных
элемент списка Firefox Chrome Safari Edge
медиа-вход-кнопка полноэкранного режима Хром Сафари
медиа-выход-кнопка полноэкранного режима Хром Сафари
медиа-полноэкранный слайдер громкости Сафари
медиа-полноэкранный-ползунок громкости Сафари
кнопка отключения звука Край Chrome Safari
кнопка воспроизведения мультимедиа Край Chrome Safari
медиа-оверлей-кнопка воспроизведения Хром Сафари
кнопка возврата в режим реального времени Сафари
кнопка перемотки мультимедиа Сафари
кнопка возврата назад Край Сафари
кнопка медиапоиска вперед Край Safari
медиа-переключатель-кнопка субтитров Хром Сафари
медиа-слайдер Край Chrome Safari
медиа-ползунок Край Chrome Safari
медиа-контейнер-слайдер Хром Сафари
медиа-громкость-ползунок-кнопка отключения звука Сафари
ползунок громкости медиа Хром Сафари
медиа-громкость-ползунок Хром Сафари
медиа-управление-фон Хром Сафари
медиа-управление-темная полоса-фон Сафари
медиа-управление-полноэкранный-фон Хром Сафари
медиа-управление-свет-бар-фон Сафари
медиа-текущее-время-дисплей Хром Сафари
отображение оставшегося времени мультимедиа Хром Сафари
текст меню Firefox Chrome Safari Edge
меню-текстовое поле Firefox Chrome Safari Edge Элемент оформлен как текстовое поле для списка меню. (Не реализовано для платформы Windows)
метр бар Фаерфокс Вместо этого используйте метра .
числовой ввод Фаерфокс
значение прогресс-бара Хром Сафари
полоса прогресса Фаерфокс Элемент имеет стиль индикатора выполнения. Используйте индикатор выполнения вместо
ProgressBar-вертикальный Фаерфокс
диапазон Фаерфокс
большой палец Фаерфокс
индикатор уровня рейтинга Сафари
индикатор уровня релевантности Сафари
шкала горизонтальная Фаерфокс
шкалаизгиб Фаерфокс
шкала с ручкой-горизонтальная Фаерфокс
шкала Фаерфокс
шкала отметок Фаерфокс
шкала вертикальная Фаерфокс
шкала вертикальная Фаерфокс
полоса прокрутки, горизонтальная Фаерфокс
полоса прокрутки, вертикальная Фаерфокс
полоса прокрутки-горизонтальная Фаерфокс
полоса прокрутки по вертикали Фаерфокс
украшение поля поиска Край Safari
поиск-результаты-украшение Край Chrome Safari (работает на Chrome 51 в Windows 7)
кнопка результатов поля поиска Край Safari
поле поиска-кнопка отмены Край Chrome Safari
снэпшот-плагин-оверлей Сафари
лист Нет
ползунок вертикальный Край Chrome Safari
ползунок-горизонтальный Край Chrome Safari
ползунок вертикальный Край Chrome Safari
многострочное текстовое поле Фаерфокс Вместо этого используйте текстовое поле .
-кнопка Apple Pay Сафари Только iOS и macOS . Доступно в Интернете, начиная с iOS 10.1 и macOS 10.12.1
Исходное значение нет
Применимо к все элементы нет
Расчетное значение как указано
Тип анимации дискретный
 внешний вид = 
 нет | 
 авто | 
  | 
  
 "> = 
 поле поиска | 
 текстовое поле | 
 кнопка | 
 горизонтальный ползунок | 
 флажок | 
 радио | 
 квадратная кнопка | 
 список меню | 
 список | 
 счетчик |
 прогресс-бар |
 кнопка 
 
 "> = 
 textfield | 
 menulist-button

Сделать элемент похожим на кнопку menulist 

 . exampleone {
  -webkit-внешний вид: меню-кнопка;
  -moz-внешний вид: менюлист-кнопка;
  внешний вид: меню-кнопка;
}

Применение пользовательского стиля

HTML