input type='file' 样式修改大法好

普通的做法，另外写一个按钮的样式，然后将自己写的按钮和这个默认的样式的定位改为重合，并将默认的按钮设置opacity:0，即设置透明度为完全透明，这样就可以在表面上是点击自己定义的样式，而实际上是点击input这个按钮。

可是让这两个东西完全重合，是很麻烦的一件事情么，下面进入最简单的方法： 
1、重写一个新的样式 可以是一个div
2、将原始的input标签默认样式设置display:none;，即设为不可见 
3、在js里调用：当点击新样式的时候，调用这个input的点击事件

这样就可以触发input type='file',选择文件

function upfile() {
    $('#file_c').click();
}

<label>图片上传</label>
<input type="file" id="file_c">
<div class="file">
     <div class="file_bt" onclick="upfile">点击上传</div>
     <div class="filetip">PDF、PNG均可</div>
     <p>
         <span>文件名称</span>
         <span>x</span>
     </p>
</div>

input[type="file"]{
    display: none;
}
.filetip{
    color: #BCBCBC;
    font-weight: 400;
    font-size: 16px;
}
.filetip.active{
    display: inline-block;
}
.file{
    display: inline-block;
    overflow: hidden;
    width: 320px;
}
.file_bt{
    display: inline-block;
    color: #0099FF;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid #0099FF;
    padding: 0px 39px;
    letter-spacing: 2px;
    line-height: normal;
    border-radius: 3px;
}
.file p {
    display: none;
    overflow: hidden;
    background-color: rgb(242,242,242);
    padding: 0 8px;
    line-height: 25px;
    border-radius: 1px;
}
.file p span:first-child{
    float: left;
}
.file p span:last-child{
    float: right;
}