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

【问题标题】：How can I remove the "No file chosen" tooltip from a file input in Chrome?如何从 Chrome 中的文件输入中删除“未选择文件”工具提示？
【发布时间】：2012-08-15 15:35:48
【问题描述】：

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

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

我试过这个没有运气：

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

【问题讨论】：

也许可以尝试在属性值中加空格：attr('title', ' ')。工具提示仍然可见，但内容为空。
检查我的答案。使用“标题”：“空间”
也许这个答案可以帮助你。 stackoverflow.com/a/25825731/1323461

标签： javascript jquery html css google-chrome

【解决方案1】：

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

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

但是如果你尝试移除这个工具提示

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

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

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

【讨论】：

在 Chromium 版本 44.0.2403.89 中工作并且在版本 40.0.3 中没有副作用！很棒的输入@simon
但您的自定义标题即使在选择文件后也会显示。
我已经将此解决方案与绑定引擎（aureliajs，angular，...）集成，这非常适合计算正确的消息并显示给用户。

【解决方案2】：

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

Fiddle

【讨论】：

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

【解决方案3】：

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

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

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

【讨论】：

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

【解决方案4】：

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

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

问题结束

【讨论】：

【解决方案5】：

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

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

【讨论】：

你应该让 title="" 否则 title=" " 显示一个空白的工具提示。

【解决方案6】：

您可以禁用工具提示，在 Chrome 等 webkit 浏览器上设置带空格的标题，在 Firefox 或 IE 上设置空字符串（在 Chrome 35、FF 29、IE 11、safari mobile 上测试）

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

【讨论】：

感谢您的编辑。我想找到一个没有 wedkitURL 的解决方案，因为它已被弃用。
这个答案是唯一对我有用的答案，只是将浏览器检测替换为stackoverflow.com/questions/9847580/…中提供的那个

【解决方案7】：

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

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 上进行了测试，它们都运行良好。

【讨论】：

【解决方案8】：

这个对我有用（至少在 Chrome 和 Firefox 中）：

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

【讨论】：

标题的框（包含不间断空格字符）仍然出现。
在 chrome 上确实出现了标题框，并带有一个空字符串。

【解决方案9】：

这是一个棘手的问题。我找不到选择“未选择文件”元素的方法，所以我使用 :after 伪选择器创建了一个掩码。

我的解决方案还需要使用以下伪选择器来设置按钮样式：

::-webkit-file-upload-button

试试这个：http://jsfiddle.net/J8Wfx/1/

仅供参考：这只适用于 webkit 浏览器。

P.S 如果有人知道如何在 webkit 检查器中查看上述 webkit 伪选择器，请告诉我

【讨论】：

在 chrome 上对我不起作用（小提琴本身显示未选择文件工具提示）

【解决方案10】：

跨所有浏览器且简单。这是为我做的

$(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">

【讨论】：

这是一个很好的解决方案！它对我很有用，因为上传文件后，文件名会显示。很好，谢谢！
如何删除工具提示？我还是看到了

【解决方案11】：

您需要对控件进行大量自定义才能实现此目的。

请按照以下指南操作：http://www.quirksmode.org/dom/inputfile.html

【讨论】：

我正要发布这个，另外还有一个 JQuery 插件可以做类似的事情filamentgroup.com/lab/…
@RyanMcDonough，我在您提供的链接中看不到任何有关隐藏工具提示的提示，我还缺少什么吗？
抱歉，我应该澄清一下。由于无法隐藏该工具提示，您需要自定义输入表单控件以实现类似的结果。从某种意义上说是在破解原始控件。
@Dreen，我也可以在您提供的链接中看到“未选择文件”工具提示，它不能解决问题...

【解决方案12】：

包装并使其不可见。在 Chrome、Safari && FF 中工作。

label { 
  padding: 5px;
  background: silver;
}
label > input[type=file] {
    display: none;
}

<label>
  <input type="file">
  select file
</label>

【讨论】：

【解决方案13】：

最好避免使用不必要的 javascript。您可以利用标签标签来展开输入的点击目标，如下所示：

<label>
  <input type="file" style="display: none;">
  <a>Open</a>
</label>

即使输入被隐藏，链接仍然可以作为它的点击目标，您可以根据需要设置它的样式。

【讨论】：

【解决方案14】：

即使您将不透明度设置为零，工具提示也会出现。在元素上尝试visibility:hidden。它对我有用。

【讨论】：

【解决方案15】：

它对我有用！

input[type="file"]{
  font-size: 0px;
}

然后，您可以使用不同类型的样式，例如width、height 或其他属性来创建您自己的输入文件。

【讨论】：

【解决方案16】：

试试-webkit-appearance:。无论如何都值得一试。

http://css-infos.net/property/-webkit-appearance

希望有帮助:)

【讨论】：

【解决方案17】：

您不能直接对 input[type=file] 进行太多修改。

使输入类型文件 opacity:0 并尝试使用自定义 CSS 将相对元素 [div/span/button] 放置在它上面

试试这个 http://jsfiddle.net/gajjuthechamp/pvyVZ/8/

【讨论】：

【解决方案18】：

惊讶地发现没有人提到event.preventDefault()

$("input[type=file]").mouseover(function(event) {
    event.preventDefault();
    // This will disable the default behavior of browser
 });

【讨论】：

【解决方案19】：

您可以为 yor 元素设置一个宽度，该宽度将仅显示按钮并隐藏“未选择文件”。

【讨论】：

【解决方案20】：

我正在寻找一个好的答案......我发现了这个：

先删除“未选择文件”

input[type="file"]{
font-size: 0px;
}

然后使用-webkit-file-upload-button 使用按钮，这样：

input[type="file"]::-webkit-file-input-button{
font-size: 16px; /*normal size*/
}

希望这是您要找的，它对我有用。

【讨论】：

【解决方案21】：

结合上面的一些建议，使用jQuery，这就是我所做的：

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

还有：

$(function() {
  $("input[type='file'].unused").click( function() {$(this).removeClass('unused')});
};

并将“未使用”类放在文件输入中。这很简单，而且效果很好。

【讨论】：

【解决方案22】：

对我来说，最好的解决方案是将输入 [type="file"] 包装在一个包装器中，并添加一些 jquery 代码：

$(function(){
	function readURL(input){
        if (input.files && input.files[0]){
            var reader = new FileReader();
            
            reader.onload = function (e){
                $('#uploadImage').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#image").change(function(){
        readURL(this);
    });
});

#image{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	width: 75px;
	height: 35px;
}
#uploadImage{
	position: relative;
	top: 30px;
	left: 70px;
}
.button{
	position: relative;
	width: 75px;
	height: 35px;
	border: 1px solid #000;
	border-radius: 5px;
	font-size: 1.5em;
	text-align: center;
	line-height: 34px;
}

<form action="#" method="post" id="form" >
	<div class="button">
		Upload<input type="file" id="image" />
     </div>
     <img id="uploadImage" src="#" alt="your image" width="350" height="300" />
 </form>

【讨论】：

【解决方案23】：

我想出了一个 hacky 解决方案，它完全删除了“未选择文件”以及在该文本之后添加的额外空间（在 Chrome 中我得到如下内容： “没有选中任何文件 ”）。

这完全弄乱了我的页面对齐方式，所以我真的努力寻找解决方案。在输入标签的样式属性中，将“width”设置为按钮的宽度将消除尾随文本和空格。由于按钮的宽度在所有浏览器中都不相同（例如，在 Firefox 中稍小），因此您还需要将样式的颜色设置为与页面背景相同的颜色（否则会出现“流浪”否”可能会显示出来）。我的输入文件标签如下所示：

<input style="float:left; **width:88px;** **color:#000000;**" type="file" id="fileInput" onclick="fileOpen()">

【讨论】：

直到现在我才看到下面的解决方案，因为它位于页面下方。无论如何，我不会删除我的解决方案，因为希望样式颜色信息会很有用（它为我解决了 Firefox 问题）。

【解决方案24】：

我知道这有点小技巧，但我只需要在样式表中将颜色设置为透明 - 内联看起来像这样 style="color:transparent;"。

【讨论】：

【解决方案25】：

隐藏工具提示的最佳选择是结合以下属性：

在输入时：color:white;（如果背景是白色会遮住文本的颜色，如果是其他颜色，则使用该颜色）。
如果输入旁边有任何其他元素，请使用position: absolute; 将元素放在工具提示上方*（小心让按钮保持可见，仅隐藏工具提示）

【讨论】：

【解决方案26】：

对于前 3 名不起作用的任何人：

创建您的输入元素：

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

通过它的 Id 将输入元素的样式设置为它看起来不存在的位置：

#file{ color: #ffffff; width: 0px; }

然后在原始输入前创建一个新按钮，使用 onclick 函数运行单击原始输入的 javascript：

<button onclick='clicker()'>BROWSE</button><input type='file' name='file' id='file' /> 
// can see the new button but not the original input:

Javascript：

function clicker(){ document.getElementById('file').click(); }

结果：

function clicker(){
document.getElementById('file').click();
}

#file{
  color: #ffffff;
  width: 0px;
}

<html>
<head>
</head>
<body>
FILE: <button onclick='clicker()'>BROWSE</button><input type='file' id='file'/>
<br>

</body>
</html>

【讨论】：