前段時間在《修復iPhone上submit按鈕bug》中介紹了使用“-webkit-appearance: none; ”來改變按鈕在iPhone下的默認風格，其實我們可以反過來思路，使用“appearance”屬性，來改變任何元素的瀏覽器默認風格，簡單的說，你可以使用“appearance”屬性將“段落p”渲染成button的風格，也可以渲染成“輸入框”、“選擇框”等效果。

大家都知道每個瀏覽器對HTML元素渲染都不一樣，比如說“button”，在chrome和ff中，渲染出來的效果都是不盡相同的。這樣一來就有了今天這個思路，利用瀏覽器的對元素的默認渲染風格，我們可以使用“appearance”屬性對任何元素的渲染風格改變，最簡單的來說，我要把“a”鏈接默認顯示成“按鈕”風格，那么我們可以使用“appearance”設置為“button”。

“appearance”功能聽起來蠻大的，不過可惜的是，目前各個瀏覽器廠商各自為政，還無法達到統一的標準，至今天也只有兩個內核的瀏覽器可以使用，其一是“webkit”，其二是“ff”的，也就是說在使用“appearances”時，需要加上各瀏覽器廠前綴。

appearance使用方法：

復制代碼代碼如下:
.elmClass{
-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;