网上也有很多类似的文章，但很多也只是美化一下按钮而已;

默认的上传按钮在后面会显示上传文件名，若按照网上的教程美化后文件名信息就看不到了;体验较差。

以下代码结合网上方案完善而来，并兼容IE等各大浏览器。

美化前后对比图：

CSS代码：

.file{
    position:relative;
    display:inline-block;
    background:#D0EEFF;
    border:1px solid #99D3F5;
    padding:5px 20px;
    border-radius:4px;
    overflow:hidden;
    color:#1E88C7;
    text-decoration:none;
    text-indent:0;
    line-height:20px;
}
.file input{
    position:absolute;
    /* 防止在各浏览器中上传按钮的显示不同,给上传按钮设置文字大小 */
    font-size:100px;
    /* 解决IE中无法靠近边缘问题 */
    right:-5px;
    top:-5px;
    /* 设置透明度为0,针对非IE浏览器或高版本IE浏览器*/
    opacity:0;
    /* 设置透明度为0,这里针对低版本IE浏览器 */
    filter:alpha(opacity=0);
    cursor:pointer;
}
.file:hover{
    background:#AADFFD;
    border-color:#78C3F3;
    color:#004974;
    text-decoration:none;
}
#textId{
    width:180px;
    height:30px;
    border:1px solid #f1f1f1;
    border-radius:4px;
    vertical-align:top;
}

HTML:

<div>
    <p>默认上传按钮</p>
    <p><input type="file" name="file"></p>
    
    <br/><br/>
    <p>美化后的上传按钮</p>
    <p>
    	<input type="text" id="textId">
    	<a href="javascript::(0)" class="file">选择文件
    	<input type="file" name="file" onchange="document.getElementById('textId').value=this.value">
    	</a>
    </p>
</div>