在 html 中替换文件浏览按钮的最佳方法是什么? [英] What is the best way to replace the file browse button in html?

问题描述

我知道当您使用带有 type="file 的 input 标记时，可以替换在 html 中生成的浏览按钮.

我不确定什么是最好的方法，所以如果有人有这方面的经验，请贡献.

解决方案

最好的方法是让文件输入控件几乎不可见(通过给它一个非常低的不透明度——不要做visibility: hidden" 或 "display: none") 并将某些东西绝对放置在它下面 - 具有较低的 z-index.

这样，实际控件将不可见，您在其下放置的任何内容都会显示出来.但由于控件位于该按钮上方，它仍会捕获点击事件(这就是您想要使用不透明度，而不是可见性或显示的原因 - 如果您使用它们来隐藏元素，浏览器会使元素不可点击).

这篇文章深入介绍了该技术.>

I know that it's possible to replace the browse button, which is generated in html, when you use input tag with type="file.

I'm not sure what is the best way, so if someone has experience with this please contribute.

解决方案

The best way is to make the file input control almost invisible (by giving it a very low opacity - do not do "visibility: hidden" or "display: none") and absolutely position something under it - with a lower z-index.

This way, the actual control will not be visible, and whatever you put under it will show through. But since the control is positioned above that button, it will still capture the click events (this is why you want to use opacity, not visibility or display - browsers make the element unclickable if you use those to hide it).

This article goes in-depth on the technique.

这篇关于在 html 中替换文件浏览按钮的最佳方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！