每当看到别人家的东西，总是那么的优美，他们的是这样的：
再想想自己家的是这样的。
样式没个性就算了，还那么多的废字，今天我们分享的就是如何把file表单做的漂亮些，废话不多说，直接进入正题。
其实当初自己的理解无非是利用postion来制作，但是后来看看网上很多朋友是把file表单的opacity设置成透明，然后在上面覆盖一层，但是发现这样对齐并不是很好，后来在张鑫旭博客看到他用的是label，然后直接通过CSS的clip属性来裁剪显示区域，这样就不用设置透明，就可以方便的设置成可视区域0，这样表单file就看不到，点不到了，那么接下来直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style media="screen">
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);}
</style>
</head>
<body>
<div class="md_f">
<form class="md_fs" action="index.html" method="post">
<label for="files" class="files">上传文件</label>
<input type="file" name="files" id="files"><br/>
</form>
</div>
</body>
</html>
评论前必须登录！
注册