javascript - 隐藏 html 输入元素，直到加载 javascript

Question

我有一个表单输入 (type='file')，我正在使用 this JQuery plugin 设置样式.基本上它在输入元素上覆盖了一个新的跨度作为各种掩码并将其全部装箱在一个 div 中。问题是，在 javascript 加载之前的第二个，它显示标准的 html 输入框和按钮(难看)。我的问题是是否有任何一个

1) 隐藏输入元素(同时保持其可点击功能)

或

2) 隐藏输入元素，直到 javascript 启动以覆盖它。

或

3) 我什至没有想到的事情。

提前致谢!

Answer 1

这是一个 100% CSS 解决方案，不需要 JS 在运行时检查尺寸。诀窍是为输入提供巨大字体大小，如460px，这会将任何可见部分推出环绕元素:

例如:

<div style="position:relative; width:100px; height:20px; overflow:hidden;">
     Upload button <!-- this text will be shown -->
     <input type="file" style="position:absolute; right:0; top:0; font-size:460px;" />
</div>