Vzhled - Triky CSS | Almanach CSS 2025

Tato appearancevlastnost se používá k zobrazení prvku pomocí stylů nativního pro platformu založených na tématu operačního systému uživatele.

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

To začíná být bez předpony, což je skvělé, protože příběh mezi prohlížeči je zde velmi komplikovaný.

appearanceVlastnost se používá pro jednu ze dvou důvodů:

Chcete-li použít styl specifický pro platformu na prvek, který jej ve výchozím nastavení nemá
Odebrat styling specifický pro platformu prvku, který jej ve výchozím nastavení obsahuje

Například vstupy s type=searchprohlížeči WebKit mají ve výchozím nastavení zaoblené rohy a jsou velmi přísné v tom, co můžete změnit pomocí CSS. Pokud tento styl nechcete, můžete jej jediným pohledem odstranit.

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

Nebo si můžete vzít vstup s textem type = text a jednoduše to vypadat jako vyhledávací vstup:

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

Hodnoty WebKit

zaškrtávací políčko
rádio
stiskněte tlačítko
čtvercové tlačítko
knoflík
zkosení knoflíku
seznam
listitem
menulista
tlačítko menulisty
menulistický text
menulistické textové pole
tlačítko posuvníku
tlačítko posuvníku dolů
posuvník - levé tlačítko
tlačítko posuvníku vpravo
scrollbartrack-horizontal
scrollbartrack-vertical
scrollbarthumb-horizontal
scrollbarthumb-vertical
scrollbargripper-horizontal
scrollbargripper-vertical
posuvník-vodorovně
posuvník - svisle
sliderthumb-horizontal
sliderthumb-vertical
stříška
vyhledávací pole
dekorační pole
searchfield-results-decoration
tlačítko výsledky hledání pole
tlačítko vyhledávacího pole - zrušit
textové pole
textová oblast

Hodnoty Mozilly

žádný
knoflík
zaškrtávací políčko
checkbox-container
zaškrtávací políčko malé
dialog
seznam
položka nabídky
menulista
tlačítko menulisty
menulistické textové pole
menupopup
ukazatel průběhu
rádio
radiokontejner
rádiový malý
resizer
Posuvník
tlačítko posuvníku dolů
posuvník - levé tlačítko
tlačítko posuvníku vpravo
tlačítko posuvníku
scrollbartrack-horizontal
scrollbartrack-vertical
oddělovač
stavový řádek
záložka
tab-left-edge Zastaralé
tabulkové panely
textové pole
textové pole - víceřádkový
Panel nástrojů
tlačítko na panelu nástrojů
sada nástrojů
-moz-mac-unified-panel nástrojů
-moz-win-bezokrajové sklo
-moz-win-browsertabbar-toolbox
-moz-win-komunikační-sada nástrojů
-moz-win-glass
-moz-win-media-toolbox
popisek
stromheadercell
stromová záhlaví
stromová položka
treetwisty
treetwistyopen
treeview
okno

Zdroje

Dokumenty Mozilla pro -moz-vzhled
Trent Walton na vzhledu Webkit
Shaun Inman o deaktivaci stínu vnitřního textu na textových vstupech na iPadu
CSS3 Spec

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.