-webkit-appearance改變任何元素的瀏覽器默認風格

前段時間，公司有個緊急發佈會，須要在移動端作一個邀請函的頁面。可是在實現下拉框的時候，IOS和安卓展現的效果老是不同。通過我一番查找，偶然間發現了-webkit-appearance這個樣式屬性。後來仔細研究了一下，如今和你們分享一下。

先來介紹一下這個屬性：

appearance：來改變任何元素的瀏覽器默認風格，簡單的說，你能夠使用「appearance」屬性將「段落p」渲染成button的風格，也能夠渲染成「輸入框」、「選擇框」等效果。怎麼樣，光看到這裏就感受到夠牛逼了吧。

接下來看看用法：

.test{
   -webkit-appearance: value;
   -moz-appearance:    value;
   appearance:         value;
}

接下來咱們一塊兒來看個簡單的實例：

<p class="lookLikeAButton">我是一個段落P元素 </p>
<p class="lookLikeAListbox">我是一個段落P元素 </p>
<p class="lookLikeAListitem">我是一個段落P元素 </p>
<p class="lookLikeASearchfield">我是一個段落P元素 </p>
<p class="lookLikeATextarea">我是一個段落P元素 </p>
<p class="lookLikeAMenulist">我是一個段落P元素</p>

接下來，使用「appearance」屬性來改變上面「P」元素的風格：

/*看起來像個按鈕，以按鈕的風格渲染*/
.lookLikeAButton{
     -webkit-appearance:button;
     -moz-appearance:button;
}
/*看起來像個清單盒子，以listbox風格渲染*/
.lookLikeAListbox{
     -webkit-appearance:listbox;
     -moz-appearance:listbox;
}
/*看起來像個清單列表，以listitem風格渲染*/
.lookLikeAListitem{
     -webkit-appearance:listitem;
     -moz-appearance:listitem;
}
/*看起來像個搜索框，以searchfield風格渲染*/
.lookLikeASearchfield{
     -webkit-appearance:searchfield;
     -moz-appearance:searchfield;
}
/*看起來像個文本域，以textarea風格渲染*/
.lookLikeATextarea{
     -webkit-appearance:textarea;
     -moz-appearance:textarea;
}
/*看起來像個下接菜單，以menulist風格渲染*/
.lookLikeAMenulist{
     -webkit-appearance:menulist;
     -moz-appearance:menulist;
}

通過「appearance」的屬性值設置後，段落P的默認風格就被改變了，如圖所示：

固然上面的屬性只是「appearance」中的一部分，我搜集了一下webkit和Mozilla下的appearance給你們參考：

Webkit下的appearance屬性值

heckbox
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下的appearance屬性值

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

聲明：本文主要參考 http://www.w3cplus.com/css3/changing-appearance-of-element-with-css3.html