欢迎使用CSDN-markdown编辑器

写一个好看的文件上传按钮

在做文件上传功能的时候，前端朋友通常会使用

<input type="file">

这个标签，这个标签是有默认样式的，而且它的默认样式没办法直接改变。例如有下面这种需求的时候。

我们就需要借助其他方式来改变其样式。我的实现方法是用一个a标签包裹input标签，然后把两个标签的宽高设为一致，把input透明度设置为0，给a标签给一个背景图片。具体实现看代码：

html:

<input type="file">
<a href="javascript:;" class="upload">
<input type="file" name="" id="">
</a>

css:

.upload {
            width: 32px;
            height: 30px;
            cursor: pointer;
            border: none;
            overflow: hidden;
            display: inline-block;
            zoom: 1;
            background: url(图片路径) center center no-repeat;
            background-size: cover;
        }

        .upload input {
            width: 32px;
            height: 30px;
            opacity: 0;
            opacity: 0;
            cursor: pointer;
        }

这样就能实现我图片中标出的按钮效果了。通过对包裹input的元素的样式修改还能实现很多种效果的按钮~~~~