Vzhľad - Triky CSS | Almanach CSS 2025

Táto appearancevlastnosť sa používa na zobrazenie prvku pomocou platformového natívneho štýlu založeného na téme operačného systému používateľov.

.thing ( -webkit-appearance: value; -moz-appearance: value; appearance: value; )

Začína to byť bez predošlej opravy, čo je skvelé, pretože príbeh medzi rôznymi prehliadačmi je tu veľmi komplikovaný.

Táto appearancenehnuteľnosť sa používa z jedného z dvoch dôvodov:

Použiť štýl špecifický pre platformu na prvok, ktorý ho predvolene nemá
Ak chcete odstrániť štýl špecifický pre platformu pre prvok, ktorý ho predvolene obsahuje

Napríklad vstupy s type=searchprehľadávačmi WebKit majú v predvolenom nastavení zaoblené rohy a sú veľmi prísne v tom, čo môžete meniť pomocou CSS. Ak tento styling nechcete, môžete ho jedným kliknutím odstrániť.

input(type=search) ( -webkit-appearance: none; )

Alebo môžete vziať vstup s textom type = text a vytvoriť z neho iba vyhľadávací vstup:

input(type=text) ( -webkit-appearance: searchfield; )

Hodnoty WebKit

začiarkavacie políčko
rádio
tlačidlo
štvorcové tlačidlo
tlačidlo
skosenie gombíka
zoznam
listitem
menulista
menulista-gombička
menulista-text
menulisticko-textové pole
tlačidlo posúvača
tlačidlo posúvača dole
posúvač - ľavé tlačidlo
posúvacie tlačidlo-pravé
scrollbartrack-horizontal
scrollbartrack-vertical
scrollbarthumb-horizontal
scrollbarthumb-vertical
scrollbargripper-horizontálne
scrollbargripper-vertical
posúvač-vodorovný
posúvač-zvislý
sliderthumb-horizontal
sliderthumb-vertical
strieška
vyhľadávacie pole
dekorácia vyhľadávacieho poľa
searchfield-results-decoration
tlačidlo vyhľadávacieho poľa-výsledkov
tlačidlo vyhľadávacieho poľa-zrušiť
textové pole
textarea

Hodnoty Mozilly

žiadny
tlačidlo
začiarkavacie políčko
checkbox-container
začiarkavacie políčko-malé
dialóg
zoznam
položka ponuky
menulista
menulista-gombička
menulisticko-textové pole
menupopup
ukazateľ postupu
rádio
rádio-kontajner
rádiomalé
rezizér
Posuvník
tlačidlo posúvača dole
posúvač - ľavé tlačidlo
posúvacie tlačidlo-pravé
tlačidlo posúvača
scrollbartrack-horizontal
scrollbartrack-vertical
oddeľovač
stavový riadok
tab
karta - ľavý okraj Zastarané
tabelne panely
textové pole
textové pole - viacriadkový
panel nástrojov
tlačidlo na paneli nástrojov
sada nástrojov
-moz-mac-unified-panel nástrojov
-moz-win-bezokrajové sklo
-moz-win-browsertabbar-panel nástrojov
-moz-win-komunikácia-sada nástrojov
-moz-win-glass
-moz-win-media-toolbox
popis
treeheadercell
hlavička stromu
stromová položka
treetwisty
treetwistyopen
treeview
okno

Zdroje

Dokumenty Mozilla pre vzhľad -moz
Trent Walton o vzhľade Webkit
Shaun Inman o deaktivácii tieňa vnútorného textu pre textové vstupy na iPade
CSS3 Spec

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.