IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

CSS3 appearance简介

前端观察 2010-08-08 23:54:44 累计浏览 3,256 次
本机暂存

我们来简单了解一下上文中提到的css appearance。在之前研究HTML5表单的时候,一直很好奇浏览器是通过什么渲染不同的表单界面的,后来在Chrome中查看类型为range的input的时候,发现了这个有趣的属性:

原图已失效

然后右边的样式显示是这样的:

原图已失效

后来就发现CSS3规范中对appearance有定义,MDC也有对这个属性的描述。

这真是个非常有趣的属性,可以用来伪装或是实现一些特殊的界面,比如将input[type=text]的appearance设置为button后,它看起来就像是一个按钮了:

原图已失效

样式如下:

1
2
3
4
input[type=text]{
	-moz-appearance:button;
	-webkit-appearance:button;
	appearance:button;}

不过现在只有webkit和firefox通过私有属性支持,各大浏览器还都没有完全正式的支持,而且它们支持的appearance属性值也不完全相同。不过既然W3C将其列入规范中,相信不久的将来,各大浏览器都会对这个属性实现一些基本的支持的吧,这样我们就能更好的控制页面中元素的表现了。

David Walsh不久前也简单的讲述了这个属性,只是只针对webkit,他还做了个demo页面

关于CSS3 appearance,欲了解更多,请查阅:

我们也会不断关注这个属性在各个浏览器中的进展。

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. css3:box-shadow边框阴影属性值详解 (累计阅读 27,109)
  2. HTML5 离线缓存-manifest简介 (累计阅读 17,102)
  3. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
  4. jQuery的data()方法 (累计阅读 8,651)
  5. 前端必须熟悉的10个CSS3属性 (累计阅读 7,718)
  6. 面向移动设备的HTML5开发框架梳理 (累计阅读 7,417)
  7. 30个超棒的404错误页面 (累计阅读 7,301)
  8. 使用CSS3开启GPU硬件加速提升网站动画渲染性能 (累计阅读 6,635)
  9. css3-animation制作逐帧动画 (累计阅读 6,516)
  10. HTML5+CSS3 loading 效果收集 (累计阅读 6,438)