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

Posted 2023-02-22

技术标签:

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

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

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

我试过这个没有运气：

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

【问题讨论】：

也许可以尝试在属性值中加空格：attr('title', ' ')。工具提示仍然可见，但内容为空。检查我的答案。使用“标题”：“空间” 也许这个答案可以帮助你。 ***.com/a/25825731/1323461 【参考方案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 的解决方案，因为它已被弃用。这个答案是唯一对我有用的答案，只是将浏览器检测替换为***.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="#"    />
 </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>

【讨论】：

以上是关于如何从 Chrome 中的文件输入中删除“未选择文件”工具提示？的主要内容，如果未能解决你的问题，请参考以下文章

从chrome中的日期类型输入中删除占位符[重复]

删除文件时无法检测 chrome 扩展中的删除事件

如何在不使用 JCL 中的 XSUM 的情况下从输入文件中删除重复项并将重复项写入文件？ [关闭]

css 从Internet Explorer和Chrome输入类型搜索中删除X.

如何在Chrome中的文件输入上垂直对齐文件名

删除 Google Chrome 上的输入焦点