兰州 网站建设app开发平台开发

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();});
});

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