渲染HTML5表单界面: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，欲了解更多，请查阅：

• https://developer.mozilla.org/en/CSS/-moz-appearance
• http://www.w3.org/TR/css3-ui/#appearance

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

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!