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

Atau setidaknya, itulah yang dipikirkan CR CSS3-UI 2004. Sayangnya, spesifikasi ini tidak pernah diterapkan sebagaimana yang dirancang, dan kami berakhir dengan situasi yang agak berbelit-belit. 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, Kalian 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 penampilan: tidak ada. 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:

Berlaku untuk seluruh element

Penjelasan Values:

none:

CSS tidak diterapkan pada elemen sama sekali. Elemen dapat ditata ulang menggunakan CSS seperti biasa.

auto:

Pengguna 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 membuat custom checkbox, Kalian ingin gaya bawaan dihapus sehingga kalian dengan bebas untuk merancang checkbox dengan cara apa pun yang kalian suka.