Appearance css что это

appearance

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

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

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

Как понять

Скопировать ссылку «Как понять» Скопировано

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

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

Скопировать ссылку «Сбрасываем внешний вид» Скопировано

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

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 .element  appearance: none;> .element  appearance: none; >    Скопировать Скопировано Не удалось скопировать   

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

 .element  appearance: auto;> .element  appearance: auto; >    Скопировать Скопировано Не удалось скопировать   

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

На практике

Скопировать ссылку «На практике» Скопировано

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

Скопировать ссылку «Денис Ежков советует» Скопировано

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

appearance

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

Общие сведения

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

appearance: none | auto

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

• none — к элементу вообще не применяются никакие стили. Элемент можно стилизовать с помощью CSS как обычно.
• auto — браузер будет отображать элементы формы в соответствии со стилями операционной системы, в которой он запущен.

appearance¶

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

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

Демо¶

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

/* 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 может быть указано как одно значение, выбранное из списка ниже.

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

Пример¶

HTML CSS Результат

1 2 3 4 5

h3>Check:h3> p>input type="checkbox">input>label>Include Optionslabel>p> h3>br/>Select one:h3> p>input type="radio" name="radio">input>label>Option Alabel>p> p>input type="radio" name="radio">input>label>Option Blabel>p> 

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

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, h3  color: #333; font-family: helvetica, arial; > label  display: inline-block; vertical-align: middle; margin: 0 0 -2px 8px; > 

Свойство -webkit-appearance

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

Допустимые значения

• none — к элементу не применяется специальный стиль
• caps-lock-indicator — индикатор, который появляется в поле пароля, когда Caps Lock включен (поддерживает Safari 4.0 и выше)
• button — элемент выглядит как кнопка
• button-bevel — элемент выглядит как косая кнопка
• caret — элемент выглядит как знак вставки
• checkbox — элемент выглядит как флаг без метки
• default-button — элемент выглядит как кнопка оформленная по-умолчанию
• listbox — элемент выглядит как список
• listitem — элемент выглядит как элемент списка
• media-fullscreen-button — элемент выглядит как кнопка для перехода в полноекранный режим
• media-mute-button — элемент выглядит как кнопка отключения звука
• media-play-button — элемент выглядит как кнопка play
• media-seek-back-button — элемент выглядит как кнопка назад
• media-seek-forward-button — элемент выглядит как кнопка вперед
• media-slider — элемент выглядит как ползунок
• media-sliderthumb — элемент выглядит как указатель полосы прокрутки
• menulist — элемент выглядит как список меню
• menulist-button — элемент выглядит как кнопка, дающая возможность открыть список меню
• menulist-text — элемент выглядит как текст, дающая возможность открыть список меню
• menulist-textfield — элемент выглядит как поле ввода для списка меню
• push-button — элемент выглядит как нажатая кнопка
• radio — элемент выглядит как переключатель
• searchfield — элемент выглядит как поле поиска
• searchfield-cancel-button — элемент выглядит как кнопка отмены поиска
• searchfield-decoration — элемент выглядит как декорация поля поиска
• searchfield-results-button — элемент выглядит как кнопка для поиска
• searchfield-results-decoration — элемент выглядит как декорация кнопки для поиска
• slider-horizontal — горизонтальная полоса прокрутки
• slider-vertical — вертикальная полоса прокрутки
• sliderthumb-horizontal — горизонтальный указатель полосы прокрутки
• sliderthumb-vertical — вертикальный указатель полосы прокрутки
• square-button — элемент выглядит как квадратная кнопка
• textarea — элемент выглядит как textarea
• textfield — элемент выглядит как текстовое поле

Пример

.block <
display:-webkit-box;
-webkit-appearance: default-button;
>

По теме

• Вендорные префиксы. Что это?
• Свойство -moz-appearance