appearanceWłaściwość służy do wyświetlania elementu przy użyciu natywnego platformy stylizacji opartej na temat systemu operacyjnego użytkowników, za.
.thing ( -webkit-appearance: value; -moz-appearance: value; appearance: value; )Zaczyna być to bez prefiksu, co jest świetne, ponieważ historia między przeglądarkami jest tutaj bardzo skomplikowana.
appearanceWłaściwość jest używana do jednego z dwóch powodów:
- Aby zastosować style specyficzne dla platformy do elementu, który nie ma go domyślnie
- Aby usunąć style specyficzne dla platformy do elementu, który ma je domyślnie
Na przykład dane wejściowe z a type=searchw przeglądarkach WebKit mają domyślnie zaokrąglone rogi i są bardzo restrykcyjne w zakresie tego, co można zmienić za pomocą CSS. Jeśli nie chcesz tej stylizacji, możesz ją usunąć za jednym zamachem z wyglądem.
input(type=search) ( -webkit-appearance: none; )Lub możesz wziąć dane wejściowe z type = text i po prostu sprawić, by wyglądały jak dane wyszukiwania:
input(type=text) ( -webkit-appearance: searchfield; )Wartości WebKit
- pole wyboru
- radio
- naciśnij przycisk
- kwadratowy przycisk
- przycisk
- fazowanie guzików
- skrzynka na listy
- element listy
- menulist
- przycisk menulist
- menulist-text
- menulist-textfield
- scrollbarbutton-up
- scrollbarbutton-down
- scrollbarbutton-left
- scrollbarbutton-right
- scrollbartrack-horizontal
- scrollbartrack-vertical
- scrollbarthumb-horizontal
- scrollbarthumb-vertical
- scrollbargripper-horizontal
- scrollbargripper-vertical
- suwak poziomy
- suwak w pionie
- przesuwne poziomo
- sliderthumb-vertical
- wstawka korektorska
- pole wyszukiwania
- dekoracja pola wyszukiwania
- dekoracja-pola-wyników-wyszukiwania
- przycisk wyszukiwania-pola-wyników
- przycisk anulowania pola wyszukiwania
- pole tekstowe
- textarea
Wartości Mozilli
- Żaden
- przycisk
- pole wyboru
- kontener checkbox
- checkbox-small
- dialog
- skrzynka na listy
- pozycja w menu
- menulist
- przycisk menulist
- menulist-textfield
- menupopup
- pasek postępu
- radio
- kontener radiowy
- radio-małe
- zmiana rozmiaru
- pasek przewijania
- scrollbarbutton-down
- scrollbarbutton-left
- scrollbarbutton-right
- scrollbarbutton-up
- scrollbartrack-horizontal
- scrollbartrack-vertical
- separator
- pasek stanu
- patka
- tab-left-edge Przestarzałe
- tablice
- pole tekstowe
- textfield-multiline
- pasek narzędzi
- toolbarbutton
- Przybornik
- -moz-mac-unified-toolbar
- -moz-win-borderless-glass
- -moz-win-browserertabbar-toolbox
- -moz-win-communication-toolbox
- -moz-win-glass
- -moz-win-media-toolbox
- podpowiedź
- treeheadercell
- treeheadersortarrow
- treeitem
- treetwisty
- treetwistyopen
- treeview
- okno
Zasoby
- Dokumenty Mozilli dla -moz-wygląd
- Trent Walton o wyglądzie Webkit
- Shaun Inman o wyłączaniu wewnętrznego cienia tekstu we wprowadzaniu tekstu na iPadzie
- Specyfikacja CSS3
Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 83 * | 80 | Nie | 83 * | TP * |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 * | 81 * | 14, 0-14, 4 * |