Penampilan - Trik CSS | CSS Almanac 2025

The appearanceharta digunakan untuk memaparkan unsur menggunakan gaya platform asli berdasarkan tema sistem operasi pengguna ini.

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

Ini mula tidak dapat diperbaiki, sangat bagus kerana kisah lintas-penyemak imbas di sini sangat rumit.

The appearanceharta digunakan untuk salah satu daripada dua sebab:

Untuk menerapkan gaya khusus platform pada elemen yang tidak memilikinya secara lalai
Untuk membuang gaya khusus platform ke elemen yang memilikinya secara lalai

Sebagai contoh, input dengan type=searchpenyemak imbas WebKit secara lalai mempunyai sudut bulat dan sangat ketat dalam apa yang dapat anda ubah melalui CSS. Sekiranya anda tidak mahu gaya itu, anda boleh menghapusnya dengan satu penampilan.

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

Atau anda boleh mengambil input dengan type = text dan membuatnya seperti input carian:

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

Nilai WebKit

kotak pilihan
radio
tekan butang
butang persegi
butang
butang-serong
kotak senarai
senaraiitem
menulist
butang menuulist
menulist-teks
menulist-textfield
butang tatal-atas
butang tatal ke bawah
butang tatal-kiri
butang tatal-kanan
scrollbartrack-mendatar
scrollbartrack-vertical
tatal tatal-mendatar
tatal tatal-menegak
scrollbargripper-mendatar
tatal bargripper-menegak
gelangsar-mendatar
gelangsar-menegak
sliderthumb-mendatar
sliderthumb-menegak
permaidani
medan pencarian
medan pencarian-hiasan
carian-hasil-hiasan
butang carian-hasil-carian
butang carian-batal-carian
bidang teks
textarea

Nilai Mozilla

tiada
butang
kotak pilihan
kotak semak-bekas
kotak semak-kecil
dialog
kotak senarai
menuitem
menulist
butang menuulist
menulist-textfield
menupopup
bar kemajuan
radio
wadah radio
radio-kecil
penyusun semula
bar tatal
butang tatal ke bawah
butang tatal-kiri
butang tatal-kanan
butang tatal-atas
scrollbartrack-mendatar
scrollbartrack-vertical
pemisah
bar status
tab
tab-kiri-usang
tabpanel
bidang teks
medan teks-multiline
bar alat
butang bar alat
kotak alat
-moz-mac-unified-toolbar
-moz-win-kaca tanpa sempadan
-moz-win-browsertabbar-toolbox
-moz-win-communications-toolbox
-moz-win-glass
-moz-win-media-kotak alat
petua alat
treeheadercell
treeheadersortarrow
treeitem
treetwisty
treetwistyopen
pandangan pokok
tingkap

Sumber

Dokumen Mozilla untuk penampilan -moz
Trent Walton pada Penampilan Webkit
Shaun Inman pada Menyahdayakan Bayangan Teks Input Teks pada iPad
Spesifikasi CSS3

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.