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
CSS 的 appearance 属性的更多相关文章
- 使用CSS3的appearance属性改变元素的外观
昨天在和同事一起完成项目的时候,我使用了appearance来渲染select,但是在firefox下出现问题,不完美,最后去除了.但还是要学习下这个属性.大家都知道每个浏览器对HTML元素渲染都不一 ...
- CSS3的appearance属性--改变元素的外观
CSS3 appearance 属性 CSS 参考手册 实例 使 div 元素看上去像一个按钮: div { appearance:button; -moz-appearance:button; /* ...
- CSS之cursor属性
CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...
- CSS样式常用属性整理
web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...
- CSS中box-sizing属性的理解与部分用法
今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- CSS Counters 计数属性
CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...
- 利用CSS的@font-face属性 在网页中嵌入字体
字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
随机推荐
- 转:ASP.NET MVC中Unobtrusive Ajax的妙用
Unobtrusive Javascript有三层含义:一是在HTML代码中不会随意的插入Javsscript代码,只在标签中加一些额外的属性值,然后被引用的脚本文件识别和处理:二是通过脚本文件所增加 ...
- linq xml读取
<?xml version="1.0" encoding="UTF-8" ?> <cache> <chatOld> < ...
- 【 D3.js 视频系列 】 飞速入门
本教程共包含 6 个视频,目的是为了帮助初学者快速入门,以便阅读本站其他文章. 本教程的名称为"飞速入门",是为初学者准备的,其中包括了 D3 开发中最基础的知识.对 D3 掌握得 ...
- 【C#学习笔记】Dictionary容器使用
using System; using System.Collections.Generic; namespace ConsoleApplication { class Program { stati ...
- HDU 5744 Keep On Movin
Keep On Movin Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tot ...
- [转] arcgis Engine创建shp图层
小生 原文 arcgis Engine创建shp图层 以创建点图层为例.首先要得到保存文件的地址. SaveFileDialog saveFileDialog = new SaveFileDialog ...
- hadoop2.0中无法启动datanode的问题
问题描述:在启动datanode进程时,能成功的启动:但用jps查看进程时,发现进程不存在,下面是在datanode日记文件的错误信息 如下图的截屏所示: 主要原因:发生错误的原因:由于把data放在 ...
- FOJ2022车站 线段树区间合并
http://acm.fzu.edu.cn/problem.php?pid=2022 刚开始MLE,用map对应,果断爆内存了,然后改用去重,离散化, lowbound查找元素位置,速度还不错,不过p ...
- 【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 ...
- Int.Parse()、Convert.toInt32()和(int)区别
通过网上的查询从而了解了Int.Parse().Convert.toInt32()和(int)区别. 一.定义上的差别 int类型表示一种整型,.NET Framework 类型为 System.In ...