Izgled - CSS-trikovi | CSS Almanah 2025

appearanceSvojstvo se koristi za prikaz element pomoću platformi izvorni stil temelji se na temu Korisnici operativnog sustava.

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

Ovo počinje biti bez prefiksa, što je sjajno jer je priča o različitim preglednicima ovdje vrlo komplicirana.

appearanceSvojstvo se koristi za jedan od dva razloga:

Primjena stila specifičnog za platformu na element koji ga nema prema zadanim postavkama
Uklanjanje stila specifičnog za platformu elementu koji ga ima prema zadanim postavkama

Na primjer, ulazi s type=searchpreglednicima WebKit po zadanom imaju zaobljene kutove i vrlo su strogi u onome što možete promijeniti putem CSS-a. Ako ne želite taj styling, možete ga jednim potezom ukloniti izgledom.

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

Ili možete uzeti unos s type = text i samo izgledati poput unosa za pretraživanje:

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

Vrijednosti WebKita

potvrdni okvir
radio
tipkalo
kvadratni gumb
dugme
kopča-gumb
popis
listitem
menulist
gumb za menulist
menulistički-tekst
menulist-tekstualno polje
tipka za pomicanje-gore
tipka za pomicanje prema dolje
tipka za pomicanje-lijevo
tipka za pomicanje -desno
pomicanje-vodoravno
scrollbartrack-vertikalno
scrollbarthumb-horizontal
scrollbarthumb-vertical
klizač -ripper-vodoravno
scrollbargripper-okomita
klizač-vodoravno
klizač-vertikalno
klizač-palac-vodoravno
klizač-palac-okomito
znak za umetanje
tražilo
tražilica-ukras
polje za pretraživanje-dekoracija
gumb pretraživačkog polja
gumb pretraživača-otkaži
polje za tekst
textarea

Mozilla vrijednosti

nijedna
dugme
potvrdni okvir
potvrdni okvir-spremnik
potvrdni okvir-mali
dijalog
popis
menuitem
menulist
gumb za menulist
menulist-tekstualno polje
skočni izbornik
traka za napredak
radio
radio-kontejner
radio-mali
resizer
traka za pomicanje
tipka za pomicanje prema dolje
tipka za pomicanje-lijevo
tipka za pomicanje -desno
tipka za pomicanje-gore
pomicanje-vodoravno
scrollbartrack-vertikalno
separator
statusna traka
tab
tab-lijevi rub zastario
tablatne ploče
polje za tekst
tekstualno polje-višeredni
alatnoj traci
gumb na alatnoj traci
kutija s alatima
-moz-mac-unified-toolbar
-moz-win-staklo bez obruba
-moz-win-browsertabbar-toolbox
-moz-win-komunikacija-alat
-moz-win-čaša
-moz-win-media-toolbox
opis
drvosječa
vrhovi stabala ili str
drvored
treetwisty
treetwistyopen
pogled na drvo
prozor

Resursi

Mozilla dokumenti za izgled -moz
Trent Walton na izgledu Webkita
Shaun Inman o onemogućavanju sjene unutarnjeg teksta unosa teksta na iPadu
CSS3 Spec

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.