CSS 的 appearance 屬性

在 Firefox 1.0+，Chrome 1.0+ 和 Safari 3.0+ 中，咱們能夠使用 -moz-appearance 或者 -webkit-appearance 屬性讓元素模仿系統原生控件的外觀。

在上述幾個瀏覽器中，默認情形 button 元素的 -moz-appearance 或 -webkit-appearancee 屬性爲 "button"。這樣瀏覽器將模仿系統按鈕的外觀來渲染該按鈕。這樣網頁應用看起來就很像系統程序，在某些時候也許頗有好處。

大多數時候咱們更喜歡本身定義按鈕的樣式。若是咱們用 CSS 修改了該按鈕的樣式（大小或字體等除外），瀏覽器將放棄模仿系統按鈕，而按照咱們的要求渲染該按鈕。但 iOS 的 Safari 瀏覽器的表現有些另類：僅僅修改按鈕的樣式基本上是無效的，而要生效還須要額外設置按鈕的 -webkit-appearance 屬性爲 "button" 或者 "none"。

實際上，咱們甚至能夠讓網頁元素模仿各類系統原生控件。例以下面的 CSS 將按鈕顯示爲系統下拉列表框，而將 select 顯示爲系統按鈕：

button {
    -moz-appearance: menulist;
    -webkit-appearance: menulist;
    appearance: menulist;
}
select {
    -moz-appearance: button;
    -webkit-appearance: button;
    appearance: button;
}

這種用法看來有些奇怪，並且瀏覽器的支持也很成問題，因此實際上不多人用它。

W3C 在 CSS3-UI 的草案中曾經也包括這個 appearance 屬性，但在 2012 年的草案中已經去掉它了。緣由在於還不夠成熟，須要從新設計。所以可能在 CSS4 中才會正式包含這個標準。

參考資料：
[1] MDN - -moz-appearance (-webkit-appearance)
[2] Safari CSS Reference: Supported CSS Properties
[3] W3C - CSS3 Basic User Interface Module 2004
[4] W3C - CSS3 Basic User Interface Module 2012
[5] W3C Wiki - css4-ui features list
[6] necolas / normalize.css
[7] CSS-Tricks - appearance
[8] Styling buttons in iOS WebKit and -webkit-appearance:none
[9] IOS下移除按鈕原生樣式 -webkit-appearance
[A] W3CPlus - 修復iPhone上submit按鈕bug