appearance

Wyłącza systemowy wygląd kontrolek formularza, żeby można je było stylować od zera.

Wartość domyślna: none (kontrolki formularzy mają auto ze stylów przeglądarki)
Dziedziczona: Nie
Animowalna: nie
Dotyczy: wszystkie elementy, efekt widać w kontrolkach formularzy
JavaScript: element.style.appearance = "none"

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Wartości
Wartości w praktyce
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

CSS

.select {
  appearance: none;
  padding: 8px 32px 8px 12px;
  border: 1px solid #444;
  border-radius: 8px;
  background: #111 url("chevron.svg") no-repeat right 10px center / 12px;
}

HTML przykładu

<select style="appearance: none; padding: 8px 32px 8px 12px; border: 1px solid #444; border-radius: 8px; color: #fff; background: #111 linear-gradient(45deg, transparent 50%, #a78bfa 50%) no-repeat right 14px center / 8px 8px;">
  <option>Wybierz kurs</option><option>HTML i CSS</option><option>Python</option>
</select>

Podgląd

Definicja i zastosowanie

Pola formularzy, przyciski i listy rozwijane mają domyślnie wygląd zależny od systemu operacyjnego. Właściwość appearance: none usuwa ten wygląd, zostawiając zwykły element, który możesz ostylować po swojemu.

Po wyłączeniu wyglądu systemowego trzeba zadbać o wszystko samodzielnie: obramowanie, tło, strzałkę listy rozwijanej, stan zaznaczenia pola wyboru i fokus. Funkcjonalność kontrolki pozostaje bez zmian.

Zanim sięgniesz po appearance: none, sprawdź, czy nie wystarczy accent-color. Natywne kontrolki są dostępne i znajome dla użytkowników.

Składnia

appearance: none | auto;

Wartości

auto
Systemowy wygląd kontrolek.
none
Kontrolki bez wyglądu systemowego, gotowe do własnego stylu.

Wartość	Opis
auto	Systemowy wygląd kontrolek.
none	Kontrolki bez wyglądu systemowego, gotowe do własnego stylu.

Wartości w praktyce

auto

Systemowy wygląd kontrolek.

.demo { appearance: auto; }

none

Kontrolki bez wyglądu systemowego, gotowe do własnego stylu.

.demo { appearance: none; border: 1px solid #a78bfa; border-radius: 6px; background: #1f1f23; color: #fff; }

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Po appearance: none zawsze przywróć wyraźny styl fokusu, na przykład przez :focus-visible.
Do samego koloru pól wyboru i suwaków wystarczy accent-color, bez przebudowy całej kontrolki.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs