Question

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

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

OR

2）隐藏输入元素，直到javascript开始掩盖它。

OR

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>

Answer 2

通常最好的方法是等待DOM和javascript完全加载，因此你将input元素设置为隐藏，然后在加载javascript时使用$(document).ready(function() {...})设置输入的样式

Answer 3

您可以使用CSS + Javascript进行此操作。

HTML示例：

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

隐藏文件的CSS：

input#file
{
    display: none;
}

加载javascript后，运行方法自定义输入并运行show命令以在自定义后显示输入：

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

通过这种方式，您的输入文件将不会出现，直到您的javascript完成所有进程。

Answer 4

你可以结合使用CSS和jQuery来隐藏元素，直到它们被完全渲染。在CSS文件中，添加：

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

在你的jQuery脚本中，在所有渲染内容之后：

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

'transition'属性不是必需的，但在某些情况下，当元素出现时有一个淡入淡出的效果很好..当许多jQuery脚本在一个站点上运行并且“一切都在闪烁”时，将其添加到身体元素和您的网站再次平滑加载。

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

4 个答案: