CSS小技巧之自定义个性的file表单样式-智言个人博客

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

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

样式没个性就算了，还那么多的废字，今天我们分享的就是如何把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>

DEMO地址：https://www.asni.cn/demo/demo4/index.html