کدپلن

appearance

خصوصیت appearance برای نمایش یک المان با base سیستم عامل و مرورگر پیشفرض استفاده می شود .

به بیان ساده تر ، این خصوصیت به دو دلیل استفاده می شود .

۱- تاثیر استایل پیشفرض پلتفرم بر روی المان هایی که استایل پیشفرض ندارند

۲- تاثیر استایل دلخواه بر روی المان هایی که استایل پیشفرض پلتفرم دارند

input[type=search] {
  -webkit-appearance: none;
}

input[type=text] {
  -webkit-appearance: searchfield;
}

به مثال زیر توجه داشته باشید ( با دقت به لبه ها و گوشه های text box نگاه کنید )

(جهت مشاهده بزرگتر بر روی ویرایش کلیک کنید )

در انتهای این آموزش مقادیر قابل قبول برای موتور های webkit و mozilla نوشته شده است .

چه مرورگرهایی از این خصوصیت پشتیبانی می کنند ؟

WebKit values

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 values

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