appearanceĪpašums tiek izmantots, lai parādītu elementu, izmantojot platformu, dzimtā stilu, balstoties uz lietotāju operētājsistēmas tēmu.
.thing ( -webkit-appearance: value; -moz-appearance: value; appearance: value; )Tas sāk nenoregulēt, kas ir lieliski, jo pārrobežu pārlūka stāsts šeit ir ļoti sarežģīts.
appearanceĪpašums tiek izmantots divu iemeslu dēļ:
- Lai lietotu platformai raksturīgu stilu elementam, kuram pēc noklusējuma tā nav
- Lai noņemtu platformai raksturīgu stilu elementam, kuram tas ir pēc noklusējuma
Piemēram, type=searchWebKit pārlūkprogrammās ievadītajām ieejām pēc noklusējuma ir noapaļoti stūri, un tās ir ļoti stingras attiecībā uz to, ko jūs varat mainīt, izmantojot CSS. Ja jūs nevēlaties šo stilu, varat to noņemt vienā mirklī ar izskatu.
input(type=search) ( -webkit-appearance: none; )Vai arī varat veikt ievadi ar type = text un vienkārši padarīt to līdzīgu meklēšanas ievadei:
input(type=text) ( -webkit-appearance: searchfield; )WebKit vērtības
- izvēles rūtiņu
- radio
- Uzspied pogu
- kvadrātveida poga
- pogu
- pogas slīpums
- sarakstā
- listitem
- menulists
- menulists-poga
- menulists-teksts
- menulists-textfield
- ritināšanas poga uz augšu
- ritināšanas poga uz leju
- ritināšanas poga pa kreisi
- ritināšanas poga pa labi
- ritināšanas josla horizontāli
- scrollbartrack-vertical
- ritināšanas ritenis-horizontāls
- scrollbarthumb-vertikāls
- scrollbargripper-horizontāls
- scrollbargripper-vertikāls
- slīdnis-horizontāls
- slīdni-vertikāli
- sliderthumb-horizontāls
- sliderthumb-vertikāls
- caret
- meklēšanas lauks
- meklēšanas lauka noformēšana
- searchfield-results-decoration
- meklēšanas lauka rezultātu poga
- meklēšanas lauka atcelšanas poga
- textfield
- textarea
Mozilla vērtības
- neviena
- pogu
- izvēles rūtiņu
- izvēles rūtiņa-konteiners
- izvēles rūtiņa - maza
- dialoglodziņš
- sarakstā
- menuitem
- menulists
- menulists-poga
- menulists-textfield
- menupopup
- progresa josla
- radio
- radio-konteiners
- radio-mazs
- mainīt izmēru
- ritjosla
- ritināšanas poga uz leju
- ritināšanas poga pa kreisi
- ritināšanas poga pa labi
- ritināšanas poga uz augšu
- ritināšanas josla horizontāli
- scrollbartrack-vertical
- atdalītājs
- statusa josla
- cilni
- cilne-kreisā mala Novecojis
- tabpanels
- textfield
- textfield-multiiline
- rīkjosla
- instrumentu poga
- rīkkaste
- -moz-mac-unified-rīkjosla
- -moz-win-borderless-glass
- -moz-win-browsertabbar-toolbox
- -moz-win-sakaru rīku kopa
- -moz-win-glass
- -moz-win-media-toolbox
- rīka padoms
- treeheadercell
- treeheadersortarrow
- treeitem
- koku vējains
- koku atvērts
- treeview
- logs
Resursi
- Mozilla Docs par -moz-izskatu
- Trents Valtons par Webkit izskatu
- Šons Inmans par teksta ievades iekšējās teksta ēnas atspējošanu iPad
- CSS3 Spec
Pārlūka atbalsts
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 83 * | 80 | Nē | 83 * | TP * |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 * | 81 * | 14,0–14,4 * |