在 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

CSS 的 appearance 属性的更多相关文章

  1. 使用CSS3的appearance属性改变元素的外观

    昨天在和同事一起完成项目的时候,我使用了appearance来渲染select,但是在firefox下出现问题,不完美,最后去除了.但还是要学习下这个属性.大家都知道每个浏览器对HTML元素渲染都不一 ...

  2. CSS3的appearance属性--改变元素的外观

    CSS3 appearance 属性 CSS 参考手册 实例 使 div 元素看上去像一个按钮: div { appearance:button; -moz-appearance:button; /* ...

  3. CSS之cursor属性

    CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...

  4. CSS样式常用属性整理

    web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...

  5. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

  6. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  7. CSS Counters 计数属性

    CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...

  8. 利用CSS的@font-face属性 在网页中嵌入字体

    字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...

  9. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

随机推荐

  1. iOS开发:Swift多线程GCD的使用

    除了上一篇文章说到到NSThread线程,还有一个GCD(Grand Central Dispath),是Apple新开发的一个解决多核编程的解决方案,充分的利用CPU资源,将所有的任务,放到一个任务 ...

  2. C#中结构体的声明

    定义:       结构是用户自定义的值类型 代码样式:struct Pair{    public int X, Y; //公有变量名单词的首字母大写(PascalCase规则)}struct Pa ...

  3. UVa 10943 (数学 递推) How do you add?

    将K个不超过N的非负整数加起来,使它们的和为N,一共有多少种方法. 设d(i, j)表示j个不超过i的非负整数之和为i的方法数. d(i, j) = sum{ d(k, j-1) | 0 ≤ k ≤ ...

  4. [反汇编练习] 160个CrackMe之006

    [反汇编练习] 160个CrackMe之006. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...

  5. Centos6.5下编译安装ACE6.0

    ACE在Linux下的编译安装步骤(CentOS6.5 64Bit) Linux平台安装(CentOS6.5 64bit) 1, 下载ACE软件包,上传至Linux服务器(假设目录为/opt/ace, ...

  6. hdu 3635 Dragon Balls(加权并查集)2010 ACM-ICPC Multi-University Training Contest(19)

    这道题说,在很久很久以前,有一个故事.故事的名字叫龙珠.后来,龙珠不知道出了什么问题,从7个变成了n个. 在悟空所在的国家里有n个城市,每个城市有1个龙珠,第i个城市有第i个龙珠. 然后,每经过一段时 ...

  7. [Everyday Mathematics]20150115

    试计算积分 $$\bex \int_{-\pi}^\pi \frac{\sin nx}{(1+2^x)\sin x}\rd x, \eex$$ 其中 $n$ 是自然数.

  8. UI篇---RadioButton(单选按钮)

    单选按钮RadioButton在Android平台上也应用的非常多,比如一些选择项的时候,会用到单选按钮,实现单选按钮由两部分组成,也就是RadioButton和RadioGroup配合使用 Radi ...

  9. poj 1505 Copying Books

    http://poj.org/problem?id=1505 Copying Books Time Limit: 3000MS   Memory Limit: 10000K Total Submiss ...

  10. 修改Android手机的“虚拟机堆大小”和android:largeHeap来防止APP内存溢出问题

    使用“RAM Manager”修改“虚拟机堆大小”为某一个阀值 xxMB大小 修改 AndroidManifest.xml 里的 Application 标签的属性 android:largeHeap ...