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