html中的<input type = "file">的样式很难修改，又跟页面风格很不匹配。我就尝试了几种方法，但是不管是用label还是用opacity:0都很麻烦，还老是出问题，所以最后还是用JavaScript来解决。

下面附上代码：

html：

<div id="custom_upload">Upload Photos</div>
<input type="file" id="uploadImg"/>

css：

#uploadImg{
    display:none;
}
#custom_upload{
    width:180px;
    height:40px;
    font-size:20px;
    text-align:center;
    padding-top:10px;
    cursor:pointer;
    border: 1px solid #99c2ed;
	border-radius: 5px;
    box-shadow:3px 3px 0px 0px #99c2ed;
}
#custom_upload:hover{
    background-color: #daedff;
}

JavaScript:

document.addEventListener('DOMContentLoaded',function(){
    var customUpload = document.getElementById('custom_upload')
    var uploadImage = document.getElementById('uploadImg');

    customUpload.addEventListener('click',function(){
        uploadImage.click();
    });
});

完成后按钮能正常点击，样式如下: