appearance

Властивість CSS appearance (зовнішній вигляд) використовується для відображення елементів інтерфейсу користувача з оформленням, специфічним для платформи, на основі теми операційної системи.

Спробуйте його в дії

До стандартизації ця властивість дозволяла відображати елементи як віджети, такі як кнопки або поля для галочки. Це вважалося помилкою, і тепер розробники заохочуються використовувати лише стандартні ключові слова.

Примітка: За бажання використовувати цю властивість на вебсайтах, слід дуже ретельно її перевірити. Попри те, що вона підтримується в більшості сучасних браузерів, її реалізація відрізняється. У старих браузерах навіть ключове слово none не має однакової дії на всі елементи форми в різних браузерах, а деякі взагалі не підтримують його. В найновіших браузерах різниці менше.

Синтаксис

/* Значення Модуля CSS Базового користувацького інтерфейсу, рівень 4 */
appearance: none;
appearance: auto;
appearance: menulist-button;
appearance: textfield;

/* Глобальні значення */
appearance: inherit;
appearance: initial;
appearance: revert;
appearance: revert-layer;
appearance: unset;

/* Значення <compat-auto> діють так само, як 'auto' */
appearance: button;
appearance: checkbox;

Значення

Для наступних ключових слів користувацький агент вибирає відповідне оформлення на основі елемента. Додано кілька прикладів, проте список не є вичерпним.

none

Приховує певні особливості віджетів, такі як стрілка, що відображається в елементі select, яка вказує на те, що список можна розгорнути.

auto

Діє як none на елементах без особливого оформлення.

<compat-special>

Або menulist-button, або textfield. Обидва ці значення на елементах без особливого оформлення рівносильні auto.

<compat-auto>

Можливі значення: button, checkbox, listbox, menulist, meter, progress-bar, push-button, radio, searchfield, slider-horizontal, square-button і textarea. Ключові слова, що рівносильні auto заради збереження сумісності зі старими браузерами.

Нестандартні значення

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

Нестандартні значення
  • Записи Firefox вказують на підтримку за допомогою -moz-appearance.
  • Записи Chrome, Edge і Safari нижче вказують на підтримку версій випуску за допомогою властивості з префіксом виробника -webkit-appearance.
  • Значення із зірочкою (*) пов'язані з чіткими намірами щодо вилучення.
  • Для кожної комірки версії браузера і значення:
    • Y{version}: позначає, що значення підтримується до і включно з {version}
    • N{version}: підтримка була вилучена у виданні, ранішому за {version}
    • порожня комірка позначає те, що підтримка ніколи не додавалася
Значення Safari Firefox Chrome Edge
attachment Y(13.1)
borderless-attachment Y(13.1)
button-bevel Y(13.1) N(75) N(80)
caps-lock-indicator Y(13.1) N(80)
caret Y(13.1) N(75) Y(73) N(80)
checkbox-container N(75)
checkbox-label N(75)
checkmenuitem N(75)
color-well Y(13.1)
continuous-capacity-level-indicator Y(13.1)
default-button Y(13.1) N(80)
discrete-capacity-level-indicator Y(13.1)
inner-spin-button Y(13.1) N(75) Y(118) * Y(119)
image-controls-button Y(13.1)
list-button Y(13.1)
listitem Y(13.1) N(75) Y(73) N(80)
media-enter-fullscreen-button Y(13.1) Y(73)
media-exit-fullscreen-button Y(13.1) Y(73)
media-fullscreen-volume-slider Y(13.1)
media-fullscreen-volume-slider-thumb Y(13.1)
media-mute-button Y(13.1) N(80)
media-play-button Y(13.1) N(80)
media-overlay-play-button Y(13.1) Y(73)
media-return-to-realtime-button Y(13.1)
media-rewind-button Y(13.1)
media-seek-back-button Y(13.1) N(73)
media-seek-forward-button Y(13.1) N(73)
media-toggle-closed-captions-button Y(13.1) Y(73)
media-slider Y(13.1) Y(117) Y(80)
media-sliderthumb Y(13.1) Y(117) Y(80)
media-volume-slider-container Y(13.1) Y(73)
media-volume-slider-mute-button Y(13.1)
media-volume-slider Y(13.1) Y(117) Y(80)
media-volume-sliderthumb Y(13.1) Y(117) Y(80)
media-controls-background Y(13.1) Y(73)
media-controls-dark-bar-background Y(13.1)
media-controls-fullscreen-background Y(13.1) Y(73)
media-controls-light-bar-background Y(13.1)
media-current-time-display Y(73)
media-time-remaining-display Y(13.1) Y(73)
menulist-text Y(13.1) N(75) Y(73) N(80)
menulist-textfield Y(13.1) N(75) Y(73) N(80)
meterbar Y(100)
number-input Y(75)
progress-bar-value Y(13.1) Y(73)
progressbar Y(100)
progressbar-vertical Y(75)
range Y(75)
range-thumb Y(75)
rating-level-indicator Y(13.1)
relevancy-level-indicator Y(13.1)
scale-horizontal Y(75)
scalethumbend Y(75)
scalethumb-horizontal Y(75)
scalethumbstart Y(75)
scalethumbtick Y(75)
scalethumb-vertical Y(75)
scale-vertical Y(75)
scrollbarthumb-horizontal Y(75)
scrollbarthumb-vertical Y(75)
scrollbartrack-horizontal Y(75)
scrollbartrack-vertical Y(75)
searchfield-decoration Y(13.1) N(80)
searchfield-results-decoration Y(13.1) N(75) N(73) N(80)
searchfield-results-button Y(13.1) N(80)
searchfield-cancel-button Y(13.1) N(75) Y(118) * Y(119)
snapshotted-plugin-overlay Y(13.1)
sheet
slider-vertical Y(118) * Y(119)
sliderthumb-horizontal Y(117) Y(80)
sliderthumb-vertical Y(117) Y(80)
textfield-multiline Y(100)
-apple-pay-button Y(13.1)

Формальне визначення

Формальний синтаксис

none | auto | textfield | menulist-button | <compat-auto>

де
<compat-auto> = searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar | button

Приклади

Застосування власного оформлення

Наступний приклад показує, як вилучити усталене оформлення з поля для галочки та елемента вибору, а також додати власне оформлення. Зовнішній вигляд галочки змінено на круг, а елемент вибору ілюструє, як можна прибрати стрілочку, яка позначає, що список можна розгортати.

HTML

<input type="checkbox" />
<input type="checkbox" checked />

<select>
  <option>усталене</option>
  <option>варіант 2</option>
</select>
<select class="none">
  <option>appearance: none</option>
  <option>варіант 2</option>
</select>

CSS

input {
  appearance: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  background: red;
}
input:checked {
  border-radius: 50%;
  background: green;
}

select {
  border: 1px solid black;
  font-size: 1em;
}

select.none {
  appearance: none;
}

Результат

Специфікації

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
appearance
Chrome Full support 84
Edge Full support 84
Firefox Full support 80
Internet Explorer No support Ні
Opera Full support 70
Safari Full support 15.4
WebView Android Full support 84
Chrome Android Full support 84
Firefox for Android Full support 80
Opera Android Full support 60
Safari on iOS Full support 15.4
Samsung Internet Full support 14.0
auto
Chrome Full support 83
Edge Full support 83
Firefox Full support 80
Internet Explorer No support Ні
Opera Full support 69
Safari Full support 15.4
WebView Android Full support 83
Chrome Android Full support 83
Firefox for Android Full support 80
Opera Android Full support 59
Safari on iOS Full support 15.4
Samsung Internet Full support 13.0
<compat-auto> (compatibility values searchfield, textarea, push-button, slider-horizontal, checkbox, radio, square-button, menulist, listbox, meter, progress-bar, button)
Chrome Full support 83
Edge Full support 83
Firefox Full support 80
Internet Explorer No support Ні
Opera Full support 69
Safari Partial support 3
WebView Android Full support 83
Chrome Android Full support 83
Firefox for Android Full support 80
Opera Android Full support 59
Safari on iOS Partial support 1
Samsung Internet Partial support 1.0
menulist-button
Chrome Full support 83
Edge Full support 83
Firefox Full support 80
Internet Explorer No support Ні
Opera Full support 69
Safari Partial support 3
WebView Android Full support 83
Chrome Android Full support 83
Firefox for Android Full support 80
Opera Android Full support 59
Safari on iOS Partial support 1
Samsung Internet Full support 13.0
none
Chrome Full support 1
Edge Full support 12
Firefox Full support 54
Internet Explorer No support Ні
Opera Full support 15
Safari Full support 3
WebView Android Full support 1
Chrome Android Full support 18
Firefox for Android Full support 54
Opera Android Full support 14
Safari on iOS Full support 3
Samsung Internet Full support 1.0
textfield
Chrome Full support 83
Edge Full support 83
Firefox Full support 80
Internet Explorer No support Ні
Opera Full support 69
Safari Partial support 3
WebView Android Full support 83
Chrome Android Full support 83
Firefox for Android Full support 80
Opera Android Full support 59
Safari on iOS Partial support 1
Samsung Internet Full support 13.0

Дивіться також