CSS appearance — прибрати системний вигляд елементів форм

CSS властивість appearance вмикає або вимикає системний вигляд елементів форм.

правити

Загальний опис

Кожна операційна система малює <select>, чекбокси й кнопки по-своєму. appearance: none знімає цю системну шкіру — і елемент стає чистим полотном для твого CSS.

Найчастіше це роблять із <select>, щоб замінити стандартну стрілочку на власну.

правити

Нотатка

Прибравши системний вигляд, ти береш на себе всю відповідальність: стан фокуса, стрілочку, наведення. Не забудь про :focus-visible.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

appearance: none | auto;

Властивість appearance може отримувати 2 значень:

none

Прибрати системну стилізацію — елемент стилізується CSS-ом.

автор: NagarD

правити

auto

Системний вигляд платформи.

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
appearance	84+	80+	15.4+	73+	84+	-

Підтримка: мобільні переглядачі

Переглядач
appearance	84+	yes	yes	15.4+

Приклади

+ запропонувати свій приклад у пісочниці

<select>
    <option>Перший варіант</option>
    <option>Другий варіант</option>
</select>

select {
    appearance: none;
    padding: .5rem 2rem .5rem .75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%230172ad'/%3E%3C/svg%3E") no-repeat right .75rem center;
}