Ulkonäkö - CSS-temppuja | CSS-almanakka 2025

appearanceOmaisuus käytetään näyttämään elementin avulla alustasta natiivityylien perustuu käyttäjien käyttöjärjestelmän teemaa.

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

Tätä aletaan korjata etukäteen, mikä on hienoa, koska selainten välinen tarina on täällä hyvin monimutkainen.

appearanceOmaisuus käytetään yhdellä kahdesta syystä:

Alustakohtaisen tyylin soveltaminen elementtiin, jolla ei ole sitä oletuksena
Alustakohtaisen tyylin poistaminen elementistä, jolla on oletuksena se

Esimerkiksi type=searchWebKit-selaimissa olevilla syötteillä on oletusarvoisesti pyöristetyt kulmat ja ne ovat hyvin tiukkoja CSS: n kautta muutettavissa. Jos et halua tyyliä, voit poistaa sen yhdellä iskulla ulkonäöltään.

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

Tai voit ottaa syötteen type = text ja tehdä siitä vain hakusyötteen:

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

WebKit-arvot

valintaruutu
radio
paina nappia
neliönappi
-painiketta
napin viiste
luetteloruutu
luettelo
menulisti
menulist-painike
menulisti-teksti
menulisti-tekstikenttä
vierityspainike ylös
vierityspainike alas
vierityspainike vasemmalle
vierityspainike oikealle
vierityspalkki vaakasuoraan
scrollbartrack-vertical
vieritysruutu-vaakasuora
scrollbarthumb-pystysuora
scrollbargripper-vaakasuora
scrollbargripper-pystysuora
liukusäädin vaakasuorassa
liukusäädin-pystysuora
liukusäädin vaakasuora
liukusäädin-pystysuora
caret
hakukenttä
hakukentän koristelu
hakukenttä-tulokset-sisustus
hakukenttä-tulokset-painike
hakukenttä-peruuta-painike
tekstikenttä
textarea

Mozilla-arvot

ei mitään
-painiketta
valintaruutu
valintaruutu-kontti
valintaruutu - pieni
valintaikkunassa
luetteloruutu
menuitem
menulisti
menulist-painike
menulisti-tekstikenttä
menupopup
edistymispalkki
radio
radiokontti
radio-pieni
kokoa
vierityspalkki
vierityspainike alas
vierityspainike vasemmalle
vierityspainike oikealle
vierityspainike ylös
vierityspalkki vaakasuoraan
scrollbartrack-vertical
erotin
tilarivi
välilehti
sarkain-vasen reuna Vanhentunut
välilehdet
tekstikenttä
textfield-multiline
työkalurivi
työkalupainike
työkalupakki
-moz-mac-unified-työkalurivi
-moz-win-reunaton-lasi
-moz-win-browsertabbar-työkalupakki
-moz-win-communications-toolbox
-moz-win-lasi
-moz-win-media-työkalupakki
työkaluvinkki
treeheadercell
treeheadersarrow
Treeitem
puiden sumuinen
puiden avaus
puunäkymä
ikkuna

Resurssit

Mozilla Docs for -moz-esiintyminen
Trent Walton Webkit-ulkoasusta
Shaun Inman tekstinsyötön sisäisen tekstivarjostuksen poistamisesta käytöstä iPadissa
CSS3 Spec

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.