appearance—外觀樣式屬性

appearance 是一個 不規範的屬性（unsupported WebKit property），它沒有出如今 CSS 規範草案中。

appearance是用來改變按鈕和其餘控件的外觀，使其外觀相似於原生控件。

例：

<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的默認風格就被改變了，如圖所示：