实现思路：

1. a标签包裹input元素
2. 设置a标签为上传按钮的样式，相对定位
3. 设置input为透明，绝对定位，覆盖到a上面

效果：看到的按钮是a的样式，点击时实际是点击input元素。样式和功能都具备

html代码：

选择文件 　　 

CSS代码：

.file {
       position: relative;    display: inline-block;    background: #ccc;    border: 1px solid #333;    padding: 4px 20px;    overflow: hidden;    text-decoration: none;    text-indent: 0;    line-height: 20px;    border-radius: 20px;    color: #333;    font-size: 13px;}.file input {
       position: absolute;    font-size: 100px;    right: 0;    top: 0;    opacity: 0;}

.gradient{
           filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#fff,endcolorstr=#ccc,gradientType=0);    -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#fff,endcolorstr=#ccc,gradientType=0);/*IE8*/        background:#ccc; /* 一些不支持背景渐变的浏览器 */      background:-moz-linear-gradient(top, #fff, #ccc);      background:-webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#ccc));      background:-o-linear-gradient(top, #fff, #ccc); }

效果：

 

此时上传文件的文件名不显示，需要用js处理：

$(".file").on("change","input[type='file']",function(){    var filePath=$(this).val();    if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){        $(".fileerrorTip1").html("").hide();        var arr=filePath.split('\\');        var fileName=arr[arr.length-1];        $(".showFileName1").html(fileName);    }else{        $(".showFileName1").html("");        $(".fileerrorTip1").html("您未上传文件，或者您上传文件类型有误！").show();        return false     }})

效果: