appearance
CSS — свойство appearance используется для управления собственным внешним видом элементов управления пользовательского интерфейса, основанных на теме операционной системы.
Try it
До стандартизации это свойство позволяло показывать простые элементы в качестве виджетов,такие как кнопки или флажки.Это свойство было признано ошибочным,и теперь авторам рекомендуется использовать только стандартные ключевые слова.
Примечание. Если вы хотите использовать это свойство на веб-сайтах, вам следует очень внимательно его протестировать. Хотя он поддерживается в большинстве современных браузеров, его реализация варьируется. В старых браузерах даже ключевое слово none не оказывает одинакового эффекта на все элементы формы в разных браузерах, а некоторые вообще не поддерживают его. В новейших браузерах различий меньше.
Syntax
/ * Значения уровня 4 модуля базового пользовательского интерфейса CSS * / appearance: none; appearance: auto; appearance: menulist-button; appearance: textfield; / * Значения "Compat-auto", которые имеют тот же эффект, что и "auto" * / appearance: button; appearance: searchfield; appearance: textarea; appearance: push-button; appearance: slider-horizontal; appearance: checkbox; appearance: radio; appearance: square-button; appearance: menulist; 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; / * Глобальные значения * / appearance: inherit; appearance: initial; appearance: revert; appearance: revert-layer; appearance: unset;
Values
Standard keywords
| Value | Browser | Description |
|---|---|---|
| none | Firefox Chrome Safari Edge | Скрывает некоторые особенности виджетов,например,стрелку,отображаемую в элементе select,указывающую на возможность расширения списка. |
| auto | Firefox Chrome Edge | Пользовательский агент выбирает соответствующий специальный стиль на основе элемента. Действует как none на элементах, не имеющих специального стиля. |
| menulist-button | Firefox Chrome Safari Edge | |
| textfield | Firefox Chrome Safari Edge | |
| Следующие значения рассматриваются как эквивалент auto : | ||
| button | Firefox Chrome Safari Edge | Элемент рисуется как кнопка. |
| checkbox | Firefox Chrome Safari Edge | Раньше элемент рисовался как флажок,включая только часть «флажка». |
| listbox | Firefox Chrome Safari Edge | |
| menulist | Firefox Chrome Safari Edge | |
| meter | Chrome Safari Firefox | |
| progress-bar | Chrome Safari Firefox | |
| push-button | Край хрома Сафари | |
| radio | Firefox Chrome Safari Edge | Раньше элемент рисовался как радиокнопка,включая только часть «радиокнопки». |
| searchfield | Firefox Chrome Safari Edge | |
| slider-horizontal | Край хрома Сафари | |
| square-button | Край хрома Сафари | |
| textarea | Firefox Chrome Safari Edge |
Non-standard keywords
Следующие значения могут работать в старых версиях браузера с использованием префикса -moz-appearance или -webkit-appearance , но не в стандартном свойстве appearance
| Value | Browser | Description |
|---|---|---|
| attachment | Safari | |
| borderless-attachment | Safari | |
| button-bevel | Firefox Chrome Safari Edge | |
| caps-lock-indicator | Safari Edge | |
| caret | Firefox Chrome Safari Edge | |
| checkbox-container | Firefox | Элемент рисуется как контейнер для флажка,который может включать эффект предварительного освещения фона при определенных платформах.Обычно он содержит метку и флажок. |
| checkbox-label | Firefox | |
| checkmenuitem | Firefox | |
| color-well | Safari | input type=color |
| continuous-capacity-level-indicator | Safari | |
| default-button | Safari Edge | |
| discrete-capacity-level-indicator | Safari | |
| inner-spin-button | Firefox Chrome Safari | |
| image-controls-button | Safari | |
| list-button | Safari | datalist |
| listitem | Firefox Chrome Safari Edge | |
| media-enter-fullscreen-button | Chrome Safari | |
| media-exit-fullscreen-button | Chrome Safari | |
| media-fullscreen-volume-slider | Safari | |
| media-fullscreen-volume-slider-thumb | Safari | |
| media-mute-button | Край хрома Сафари | |
| media-play-button | Край хрома Сафари | |
| media-overlay-play-button | Chrome Safari | |
| media-return-to-realtime-button | Safari | |
| media-rewind-button | Safari | |
| media-seek-back-button | Safari Edge | |
| media-seek-forward-button | Safari Edge | |
| media-toggle-closed-captions-button | Chrome Safari | |
| media-slider | Край хрома Сафари | |
| media-sliderthumb | Край хрома Сафари | |
| media-volume-slider-container | Chrome Safari | |
| media-volume-slider-mute-button | Safari | |
| media-volume-slider | Chrome Safari | |
| media-volume-sliderthumb | Chrome Safari | |
| media-controls-background | Chrome Safari | |
| media-controls-dark-bar-background | Safari | |
| media-controls-fullscreen-background | Chrome Safari | |
| media-controls-light-bar-background | Safari | |
| media-current-time-display | Chrome Safari | |
| media-time-remaining-display | Chrome Safari | |
| menulist-text | Firefox Chrome Safari Edge | |
| menulist-textfield | Firefox Chrome Safari Edge | Элемент стилизован под текстовое поле для менюлиста.(Не реализовано для платформы Windows) |
| meterbar | Firefox | Вместо этого используйте meter . |
| number-input | Firefox | |
| progress-bar-value | Chrome Safari | |
| progressbar | Firefox | Элемент оформлен как индикатор выполнения. Вместо этого используйте progress-bar |
| progressbar-vertical | Firefox | |
| range | Firefox | |
| range-thumb | Firefox | |
| rating-level-indicator | Safari | |
| relevancy-level-indicator | Safari | |
| scale-horizontal | Firefox | |
| scalethumbend | Firefox | |
| scalethumb-horizontal | Firefox | |
| scalethumbstart | Firefox | |
| scalethumbtick | Firefox | |
| scalethumb-vertical | Firefox | |
| scale-vertical | Firefox | |
| scrollbarthumb-horizontal | Firefox | |
| scrollbarthumb-vertical | Firefox | |
| scrollbartrack-horizontal | Firefox | |
| scrollbartrack-vertical | Firefox | |
| searchfield-decoration | Safari Edge | |
| searchfield-results-decoration | Край хрома Сафари | (Работает в Chrome 51 в Windows 7) |
| searchfield-results-button | Safari Edge | |
| searchfield-cancel-button | Край хрома Сафари | |
| snapshotted-plugin-overlay | Safari | |
| sheet | None | |
| slider-vertical | Край хрома Сафари | |
| sliderthumb-horizontal | Край хрома Сафари | |
| sliderthumb-vertical | Край хрома Сафари | |
| textfield-multiline | Firefox | Вместо этого используйте textarea . |
| -apple-pay-button | Safari | Только для iOS и MacOS . Доступно в Интернете, начиная с iOS 10.1 и macOS 10.12.1 |
Formal definition
Formal syntax
appearance = none | auto | compat-auto> | compat-special> compat-auto> = searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar | button compat-special> = textfield | menulist-button
Examples
Сделать элемент похожим на кнопку меню
Применить пользовательскую стилизацию
HTML
select class="none"> option>appearance: noneoption> select> select class="auto"> option>appearance: autooption> select>
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).
На практике
Скопировать ссылку «На практике» Скопировано
Денис Ежков советует
Скопировать ссылку «Денис Ежков советует» Скопировано
🛠 Сброс стандартного отображения элементов может быть полезным при применении пользовательских стилей к элементам форм: