Properti appearance mengontrol bagaimana kontrol bentuk asli diberikan. Mengatur appearance: tidak ada yang menekan gaya asli sehingga CSS dapat digunakan untuk menata ulang sepenuhnya.

Atau setidaknya, itulah yang dipikirkan CR CSS3-UI 2004. Sayangnya, spesifikasi ini tidak pernah diterapkan sebagaimana yang dirancang. Properti sejak itu telah dihapus dari CSS3-UI dan sedang dilihat kembali di Modul Dasar Antarmuka Pengguna CSS Level 4.

Apa yang saat ini kita miliki adalah sup awalan vendor. Tidak ada browser yang mendukung versi yang tidak diawali saat ini. Dan baik Webkit maupun Gecko masing-masing mendukung serangkaian nilai yang berbeda untuk -webkit-appearance dan -moz-appearance . Secara teori, Anda dapat memilih untuk menampilkan elemen menggunakan gaya platform-asli tergantung pada tema sistem operasi, tetapi pada kenyataannya, ini tidak dianjurkan sama sekali.

Penggunaan paling umum dari properti ini saat ini adalah untuk mengatur ulang gaya default menggunakan appearance : none. Menggunakan nilai-nilai lain untuk membuat elemen Kalian meniru tampilan dan nuansa UI platform-asli tidak disarankan karena nilai-nilai itu, telah dikeluarkan dari spesifikasi.

Versi terbaru dari penampilan masih sedang dikerjakan di CSS Basic User Interface Module 4 dan versi un-prefixed sekarang mengambil 2 nilai, tidak ada dan otomatis.

Official Syntax:

Values:

none: Gaya tidak diterapkan pada elemen sama sekali. Elemen dapat ditata menggunakan CSS seperti biasa.

auto: user-agent akan membuat kontrol bentuk dengan gaya default sistem operasi host.

Webkit-specific: checkbox | radio | push-button | square-button | button | button-bevel | listbox | listitem | menulist | menulist-button | menulist-text | 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-vertical | sliderthumb-horizontal | sliderthumb-vertical | caret | searchfield | searchfield-decoration | searchfield-results-decoration | searchfield-results-button | searchfield-cancel-button | textfield | textarea

Mozilla-specific: none | button | checkbox | checkbox-container | checkbox-small | dialog | listbox | menuitem | menulist | menulist-button | menulist-textfield | menupopup | progressbar | radio | radio-container | radio-small | resizer | scrollbar | scrollbarbutton-down | scrollbarbutton-left | scrollbarbutton-right | scrollbarbutton-up | scrollbartrack-horizontal | scrollbartrack-vertical | separator | statusbar | tab | tab-left-edge Obsolete | tabpanels | textfield | textfield-multiline | toolbar | toolbarbutton | toolbox | -moz-mac-unified-toolbar | -moz-win-borderless-glass | -moz-win-browsertabbar-toolbox | -moz-win-communications-toolbox | -moz-win-glass | -moz-win-media-toolbox | tooltip | treeheadercell | treeheadersortarrow | treeitem | treetwisty | treetwistyopen | treeview | window

Contoh:

Jika Kalian ingin memiliki kotak centang khusus, Kalian ingin styling standar dihapus sehingga Kalian bebas untuk merancang kotak centang dengan cara apa pun yang kalian suka.