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

我有一个正在使用的表单输入（type='file'）。基本上，它在输入元素上覆盖了一个新的范围，作为排序的掩码，并将其全部装箱到一个div中。问题是，在加载javascript之前的第二次，它显示了标准的html输入框和按钮（很难看）。我的问题是，这两者是否都有关系

1） 隐藏输入元素（同时保持其可单击功能）

或

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

或

3） 一些我甚至没有想到的事情

---

提前谢谢

这是一个100%CSS解决方案，不需要JS在运行时检查维度。诀窍是给输入一个大的字体大小，如

460px

，这将把任何可见部分从包装元素中推出：

例：

上传按钮

通常最好的方法是等待DOM和javascript完全加载，因此您可以将输入元素设置为隐藏，然后使用

$（document）.ready（function（）{…}）

在加载javascript时设置输入样式

您可以使用CSS+javascript来完成此操作

HTML示例：

<input type="file" name="file" id="file" />

加载javascript后，运行该方法以自定义输入，并运行show命令以使自定义后的输入可见：

$('input#file').customFileInput().show();

---

通过这种方式，在javascript完成所有处理之前，您的输入文件不会显示。

您可以将CSS和jQuery结合起来隐藏元素，直到它们完全呈现。在CSS文件中，添加：

.element{
    opacity: 0;
    transition: opacity 0.5s ease;
}

在jQuery脚本中，在完成所有渲染之后：

$('.element').css('opacity', '1');

---

“transition”属性不是必需的，但在某些情况下，当元素显示时，具有淡入淡出效果是很好的。。当许多jQuery脚本在一个站点上运行并且“一切都在闪烁”时，将其添加到body元素，您的站点将再次顺利加载。

OP想要重新设置输入字段的样式，这对他没有帮助。是的，尽管如此，还是尝试了一下。结果是，当我使用此方法时，无法打开文件浏览窗口。谢谢你的主意。很好的解决方案。此外，我还将背景设置为透明，并将边框设置为“无”，这样做很好。

.element{
    opacity: 0;
    transition: opacity 0.5s ease;
}

$('.element').css('opacity', '1');