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

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

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

appearance使用方法：

CSS Code復制內容到剪貼板

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

接下來我們一起來看個簡單的實例：

XML/HTML Code復制內容到剪貼板

<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”元素的風格：

XML/HTML Code復制內容到剪貼板

/*看起來像個按鈕，以按鈕的風格渲染*/   
.lookLikeAButton{   
     -webkit-appearance:button;   
     -moz-appearance:button;   
}   
/*看起來像個清單盒子，以listbox風格渲染*/   
.lookLikeAListbox{   
     -webkit-appearance:listbox;