file html5 样式,CSS小技巧之自定义个性的file表单样式

每当看到别人家的东西，总是那么的优美，他们的是这样的：

再想想自己家的是这样的。

样式没个性就算了，还那么多的废字，今天我们分享的就是如何把file表单做的漂亮些，废话不多说，直接进入正题。

其实当初自己的理解无非是利用postion来制作，但是后来看看网上很多朋友是把file表单的opacity设置成透明，然后在上面覆盖一层，但是发现这样对齐并不是很好，后来在张鑫旭博客看到他用的是label，然后直接通过CSS的clip属性来裁剪显示区域，这样就不用设置透明，就可以方便的设置成可视区域0，这样表单file就看不到，点不到了，那么接下来直接上代码：

Demo

body{font-family: '微软雅黑'; font-size: 14px; margin: 0; padding: 0;}

.md_f{margin: 20px;}

.files{display: inline-block; border-radius: 4px; padding: 10px 10px; border: 0; background-color: #f66; color: #fff; position: relative; z-index: 2;}

.files:hover{opacity: 0.8; cursor: pointer;}

#files{position: absolute; clip:rect(0 0 0 0);}

上传文件