如何从Chrome中的文件输入中删除"未选择文件"工具提示？

Question

我想从Google Chrome中的文件输入中删除"未选择文件"工具提示(我发现Firefox中没有显示工具提示).

请注意,我所说的不是输入字段中的文本,而是关于将鼠标移到输入上时出现的工具提示.

我试过这个没有运气:

$('#myFileInput').attr('title', '');

Answer 1

这是webkit浏览器的本机部分,您无法将其删除.您应该考虑像覆盖或隐藏文件输入这样的hacky解决方案.

一个hacky解决方案:

input[type='file'] {
  opacity:0    
}

<div>
    <input type='file'/>
    <span id='val'></span>
    <span id='button'>Select File</span>
</div>   

$('#button').click(function(){
   $("input[type='file']").trigger('click');
})

$("input[type='file']").change(function(){
   $('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
})    

小提琴

Answer 2

对我来说,我只是希望文本不可见,仍然使用本机浏览器按钮.

input[type='file'] {
  color: transparent;
}

我喜欢所有未定义的建议,但我有一个不同的用例,希望这可以帮助处于相同情况的人.

Answer 3

可以使用title属性编辑默认工具提示

<input type='file' title="your text" />

但是,如果您尝试删除此工具提示

<input type='file' title=""/>

这不行.这是我的小技巧,用空格尝试标题.它会工作.:)

<input type='file' title=" "/>

Answer 4

您可以禁用工具提示,在Chromekit等Webkit浏览器上设置空格,在Firefox或IE上设置空字符串(在Chrome 35,FF 29,IE 11,safari mobile上测试)

$('input[type="file"]').attr('title', window.webkitURL ? ' ' : '');

Answer 5

我找到了一个非常简单的解决方案，只需在title属性中设置一个空字符串即可。

<input type="file" value="" title=" " />

Answer 6

这里的所有答案都过于复杂，或者完全错误。

html：

<div>
    <input type="file" />
    <button>Select File</button>
</div>

css：

input {
    display: none;
}

javascript:

$('button').on('click', function(){
   $('input').trigger('click'); 
});

http://jsfiddle.net/odfe34n8/

我以最简单的方式创建了这个小提琴。单击“选择文件”按钮将调出文件选择菜单。然后，您可以按您想要的任何方式对按钮进行样式化。基本上，您需要做的就是隐藏文件输入，并在您单击另一个按钮时触发对它的合成单击。我在 IE 9、FF 和 Chrome 上对此进行了现场测试，它们都运行良好。

Answer 7

这个适用于我(至少在Chrome和Firefox中):

<input type="file" accept="image/*" title="&nbsp;"/>

Answer 8

很简单,忘记了针对输入["类型"]的CSS,它对我不起作用.我不知道为什么.我的HTML标签中有我的解决方案

<input type="file" style="color:transparent; width:70px;"/>

问题结束了