在 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. 转:ASP.NET MVC中Unobtrusive Ajax的妙用

    Unobtrusive Javascript有三层含义:一是在HTML代码中不会随意的插入Javsscript代码,只在标签中加一些额外的属性值,然后被引用的脚本文件识别和处理:二是通过脚本文件所增加 ...

  2. linq xml读取

    <?xml version="1.0" encoding="UTF-8" ?> <cache> <chatOld> < ...

  3. 【 D3.js 视频系列 】 飞速入门

    本教程共包含 6 个视频,目的是为了帮助初学者快速入门,以便阅读本站其他文章. 本教程的名称为"飞速入门",是为初学者准备的,其中包括了 D3 开发中最基础的知识.对 D3 掌握得 ...

  4. 【C#学习笔记】Dictionary容器使用

    using System; using System.Collections.Generic; namespace ConsoleApplication { class Program { stati ...

  5. HDU 5744 Keep On Movin

    Keep On Movin Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tot ...

  6. [转] arcgis Engine创建shp图层

    小生 原文 arcgis Engine创建shp图层 以创建点图层为例.首先要得到保存文件的地址. SaveFileDialog saveFileDialog = new SaveFileDialog ...

  7. hadoop2.0中无法启动datanode的问题

    问题描述:在启动datanode进程时,能成功的启动:但用jps查看进程时,发现进程不存在,下面是在datanode日记文件的错误信息 如下图的截屏所示: 主要原因:发生错误的原因:由于把data放在 ...

  8. FOJ2022车站 线段树区间合并

    http://acm.fzu.edu.cn/problem.php?pid=2022 刚开始MLE,用map对应,果断爆内存了,然后改用去重,离散化, lowbound查找元素位置,速度还不错,不过p ...

  9. 【LeetCode 215】Kth Largest Element in an Array

    Find the kth largest element in an unsorted array. Note that it is the kth largest element in the so ...

  10. Int.Parse()、Convert.toInt32()和(int)区别

    通过网上的查询从而了解了Int.Parse().Convert.toInt32()和(int)区别. 一.定义上的差别 int类型表示一种整型,.NET Framework 类型为 System.In ...