在 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