Javascript 如何从 Chrome 中的文件输入中删除“未选择文件”工具提示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12035400/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I remove the "No file chosen" tooltip from a file input in Chrome?
提问by German Latorre
I would like to remove the "No file chosen" tooltip from a file input in Google Chrome (I see that no tooltip is displayed in Firefox).
我想从 Google Chrome 中的文件输入中删除“未选择文件”工具提示（我看到 Firefox 中没有显示任何工具提示）。
Please notice that I'm talking not about the text inside the input field, but about the tooltip that appears when you move the mouse over the input.
请注意，我说的不是输入字段内的文本，而是当您将鼠标移到输入上时出现的工具提示。
I've tried this with no luck:
我试过这个没有运气：
$('#myFileInput').attr('title', '');
采纳答案by undefined
This is a native part of the webkitbrowsers and you cannot remove it. You should think about a hacky solution like coveringor hidingthe file inputs.
这是webkit浏览器的本机部分，您无法删除它。你应该考虑一个像覆盖或隐藏文件输入这样的hacky解决方案。
A hackysolution:
一个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, ''))
})
回答by simon
The default tooltip can be edited by using the title attribute
可以使用 title 属性编辑默认工具提示
<input type='file' title="your text" />
But if you try to remove this tooltip
但是如果您尝试删除此工具提示
<input type='file' title=""/>
This won't work. Here is my little trick to work this, try title with a space. It will work.:)
这行不通。这是我解决这个问题的小技巧，尝试使用空格的标题。它会起作用。:)
<input type='file' title=" "/>
回答by Dwayne Forde
For me, I just wanted the text to be invisible and still use the native browser button.
对我来说，我只是希望文本不可见，并且仍然使用本机浏览器按钮。
input[type='file'] {
color: transparent;
}
I like all of undefined's suggestions but I had a different use case, hope this helps someone in the same situation.
我喜欢所有未定义的建议，但我有一个不同的用例，希望这对处于相同情况的人有所帮助。
回答by JNTN B77
I found a solution that is very easy, just set an empty string into the title attribute.
我找到了一个非常简单的解决方案，只需在 title 属性中设置一个空字符串即可。
<input type="file" value="" title=" " />
回答by jbier
You can disable the tooltip setting a title with a space on webkit browsers like Chrome and an empty string on Firefox or IE (tested on Chrome 35, FF 29, IE 11, safari mobile)
您可以禁用工具提示，在 Chrome 等 webkit 浏览器上设置带有空格的标题，在 Firefox 或 IE 上设置为空字符串（在 Chrome 35、FF 29、IE 11、safari mobile 上测试）
$('input[type="file"]').attr('title', window.webkitURL ? ' ' : '');
回答by Lawel
Very easy, forget CSS targeting the input["type"] thing, it doesn't work for me. I don't know why. I got my solution in my HTML tag
很简单，忘记针对 input["type"] 的 CSS，它对我不起作用。我不知道为什么。我在我的 HTML 标签中找到了我的解决方案
<input type="file" style="color:transparent; width:70px;"/>
End of the problem
问题结束
回答by Андрей Куценко
This one works for me (at least in Chrome and Firefox):
这个对我有用（至少在 Chrome 和 Firefox 中）：
<input type="file" accept="image/*" title=" "/>
回答by LadyCailin
All the answers here are totally overcomplicated, or otherwise just totally wrong.
这里的所有答案都过于复杂，或者完全错误。
html:
html：
<div>
<input type="file" />
<button>Select File</button>
</div>
css:
css：
input {
display: none;
}
javascript:
javascript:
$('button').on('click', function(){
$('input').trigger('click');
});
I created this fiddle, in the most simplistic way. Clicking the Select File button will bring up the file select menu. You could then stylize the button any way you wanted. Basically, all you need to do is hide the file input, and trigger a synthetic click on it when you click another button. I spot tested this on IE 9, FF, and Chrome, and they all work fine.
我以最简单的方式创建了这个小提琴。单击“选择文件”按钮将调出文件选择菜单。然后，您可以按您想要的任何方式对按钮进行样式化。基本上，您需要做的就是隐藏文件输入，并在您单击另一个按钮时触发对它的合成单击。我在 IE 9、FF 和 Chrome 上对此进行了现场测试，它们都运行良好。
回答by jameswakefield
This is a tricky one. I could not find a way to select the 'no file chosen' element so I created a mask using the :after pseudo selector.
这是一个棘手的问题。我找不到选择“未选择文件”元素的方法，因此我使用 :after 伪选择器创建了一个掩码。
My solution also requires the use of the following pseudo selector to style the button:
我的解决方案还需要使用以下伪选择器来设置按钮样式：
::-webkit-file-upload-button
Try this: http://jsfiddle.net/J8Wfx/1/
试试这个：http: //jsfiddle.net/J8Wfx/1/
FYI: This will only work in webkit browsers.
仅供参考：这仅适用于 webkit 浏览器。
P.S if anyone knows how to view webkit pseudo selectors like the one above in the webkit inspector please let me know
PS，如果有人知道如何在 webkit 检查器中查看像上面那样的 webkit 伪选择器，请告诉我
回答by Ifeanyi Chukwu
Across all browsers and simple. this did it for me
跨所有浏览器且简单。这是为我做的
$(function () {
$('input[type="file"]').change(function () {
if ($(this).val() != "") {
$(this).css('color', '#333');
}else{
$(this).css('color', 'transparent');
}
});
})input[type="file"]{
color: transparent;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="app_cvupload" class="fullwidth input rqd">