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

IT技术 javascript jquery html css google-chrome
2021-01-29 07:06:42

我想从 Google Chrome 中的文件输入中删除“未选择文件”工具提示（我看到 Firefox 中没有显示任何工具提示）。

请注意，我说的不是输入字段内的文本，而是当您将鼠标移到输入上时出现的工具提示。

我试过这个没有运气：

$('#myFileInput').attr('title', '');
6个回答

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

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

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

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

这行不通。这是我解决这个问题的小技巧，尝试使用空格的标题。它会起作用。:)

<input type='file' title=" "/>
但即使在选择文件后，您的自定义标题也会显示出来。
2021-03-23 07:06:42
在 Chromium 44.0.2403.89 版中有效，在 40.0.3 版中没有副作用！很棒的输入@simon
2021-03-25 07:06:42
我已将此解决方案与绑定引擎（aureliajs、angular 等）集成在一起，这非常适合计算正确的消息并向用户显示。
2021-04-10 07:06:42

这是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, ''))
})

小提琴

当您将鼠标悬停在输入的底部边缘时，仍会显示工具提示。“不透明度：0”不能解决问题。
2021-03-20 07:06:42
我见过的最干净的黑客之一。希望它适用于所有浏览器，如 IE9+、FF、Safari。在 Chrome 中完美运行。
2021-03-20 07:06:42
您可以使用样式隐藏：style='width: 0;overflow: hidden;opacity:0;filter:alpha(opacity=0);display: inline;position: absolute;'
2021-03-31 07:06:42
@Webars 我提到了hacky，而不是防弹。
2021-04-09 07:06:42
@NisanthSojan 所以让它变得更好，这只是一个例子。
2021-04-14 07:06:42

对我来说，我只是希望文本不可见，并且仍然使用本机浏览器按钮。

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

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

这是 2020 的最佳答案。将不透明度设置为 0 会使整个元素不可见。
2021-03-19 07:06:42
没有拿走我的“未选择文件”。
2021-03-27 07:06:42
@MEM，您使用的是哪个浏览器？这在 Chrome 上对我有用（有一些修改，因为我不只是希望文本消失）。
2021-03-28 07:06:42
这为我摆脱了“未选择文件”
2021-04-03 07:06:42

很简单，忘记 CSS 以 input["type"] 为目标，它对我不起作用。我不知道为什么。我在我的 HTML 标签中找到了我的解决方案

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

问题结束

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

<input type="file" value="" title=" " />
您应该只设置 title="" 否则 title=" " 会显示一个空白的工具提示。
2021-04-08 07:06:42
其它你可能感兴趣的问题
上一篇如何在 JavaScript 中格式化/整理/美化 下一篇Chart.js — 绘制任意垂直线