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

问题描述

我知道，当您使用输入标签与 type =file时，可以替换html中生成的浏览按钮， / code>。

我不知道最好的方法是什么，所以如果有人有这方面的经验，请提供。

解决方案

最好的方法是使文件输入控件几乎不可见（给它一个非常低的不透明度 - 不要做 可见性：隐藏或显示：无），并绝对定位在其下方 - 使用较低的 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屋！