网站文字大小,品质好的英文,乐清新闻最新消息,网页设计学科门类是啥html中的input type file的样式很难修改#xff0c;又跟页面风格很不匹配。我就尝试了几种方法#xff0c;但是不管是用label还是用opacity:0都很麻烦#xff0c;还老是出问题#xff0c;所以最后还是用JavaScript来解决。
下面附上代码#xff1a;…html中的input type file的样式很难修改又跟页面风格很不匹配。我就尝试了几种方法但是不管是用label还是用opacity:0都很麻烦还老是出问题所以最后还是用JavaScript来解决。
下面附上代码
html
div idcustom_uploadUpload Photos/div
input typefile iduploadImg/ 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();});
}); 完成后按钮能正常点击样式如下:
