Penampilan - Trik CSS | CSS Almanak 2025

The appearanceproperti digunakan untuk menampilkan elemen menggunakan styling platform asli berdasarkan tema sistem operasi pengguna ini.

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

Ini mulai tidak diperbaiki, yang bagus karena kisah lintas-browser di sini sangat rumit.

The appearanceproperti digunakan untuk salah satu dari dua alasan:

Untuk menerapkan gaya khusus platform ke elemen yang tidak memilikinya secara default
Untuk menghapus gaya khusus platform ke elemen yang memilikinya secara default

Misalnya, input dengan type=searchbrowser WebKit secara default memiliki sudut yang membulat dan sangat ketat dalam hal apa yang dapat Anda ubah melalui CSS. Jika Anda tidak menginginkan gaya itu, Anda dapat menghapusnya dalam satu gerakan sesuai penampilan.

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

Atau Anda dapat mengambil input dengan type = text dan membuatnya terlihat seperti input pencarian:

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

Nilai WebKit

kotak centang
radio
tekan tombol
tombol persegi
tombol
kancing-kemiringan
kotak daftar
Daftar barang
Daftar menu
tombol menulist
teks menulist
menulist-textfield
scrollbarbutton-up
scrollbarbutton-down
scrollbarbutton-left
scrollbarbutton-right
scrollbartrack-horizontal
scrollbartrack-vertical
scrollbarthumb-horizontal
scrollbarthumb-vertical
scrollbargripper-horizontal
scrollbargripper-vertical
slider-horizontal
slider-vertikal
sliderthumb-horizontal
sliderthumb-vertical
tanda sisipan
bidang pencarian
searchfield-decoration
searchfield-results-decoration
searchfield-results-button
searchfield-cancel-button
textfield
textarea.dll

Nilai Mozilla

tidak ada
tombol
kotak centang
kotak centang-wadah
kotak centang-kecil
dialog
kotak daftar
menuitem
Daftar menu
tombol menulist
menulist-textfield
menupopup
progressbar
radio
wadah radio
radio-kecil
pengubah ukuran
scroll bar
scrollbarbutton-down
scrollbarbutton-left
scrollbarbutton-right
scrollbarbutton-up
scrollbartrack-horizontal
scrollbartrack-vertical
pemisah
status bar
tab
tab-left-edge Kedaluwarsa
panel tab
textfield
textfield-multiline
toolbar
toolbarbutton
kotak peralatan
-moz-mac-unified-toolbar
-moz-win-borderless-glass
-moz-win-browsertabbar-toolbox
-moz-win-komunikasi-toolbox
-moz-win-glass
-moz-win-media-toolbox
tooltip
treeheadercell
pohonheadersortarrow
item pohon
treetwisty
treetwistyopen
Treeview
jendela

Sumber daya

Mozilla Docs untuk -moz-penampilan
Trent Walton tentang Penampilan Webkit
Shaun Inman tentang Menonaktifkan Inner Text Shadow of Text Inputs di iPad
Spesifikasi CSS3

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.