CSS3 appearance简介
我们来简单了解一下上文中提到的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,欲了解更多,请查阅:
我们也会不断关注这个属性在各个浏览器中的进展。
如果你喜欢本文,欢迎 订阅本站 以获得本站最新内容。
html5+css3不知道何时能真正应用起来。
玩过一阵子,还不错,这样的话视图和功能就进一步分离了。
就是支持的浏览器太少,bug也有好多(1年前用webkit的时候,好多值还是无效的)
要达到全民支持是有很大难度的!
这个很历害
这是个很强大的东西啊 呵呵
之前测试的时候也发现了。这样网页的表现能力强大很多
貌似链接挂了~~