94

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

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

我试过这个没有运气：

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

26 回答 26

72

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

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

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

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

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

<input type='file' title=" "/>
于 2015-05-27T10:26:16.437 回答
66

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

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

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

于 2013-01-30T09:47:27.473 回答
65

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

小提琴

于 2012-08-20T09:52:04.417 回答
12

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

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

问题结束

于 2016-06-13T18:51:35.453 回答
12

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

<input type="file" value="" title=" " />
于 2018-03-09T14:37:24.320 回答
8

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

$('input[type="file"]').attr('title', window.webkitURL ? ' ' : '');
于 2014-06-06T20:44:40.540 回答
5

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

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

于 2015-07-27T20:44:49.383 回答
5

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

<input type="file" accept="image/*" title="&nbsp;"/>
于 2016-01-15T11:30:34.297 回答
4

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

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

::-webkit-file-upload-button

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

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

PS，如果有人知道如何在 webkit 检查器中查看上面的 webkit 伪选择器，请告诉我

于 2013-01-07T16:41:28.027 回答
4

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

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

于 2015-04-30T13:02:42.417 回答
3

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

请遵循以下指南：http ://www.quirksmode.org/dom/inputfile.html

于 2012-08-20T10:02:12.183 回答
3

包裹并使其隐形。在 Chrome、Safari && FF 中工作。

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

于 2017-10-25T14:52:41.613 回答
2

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

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

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

于 2016-04-14T19:07:27.560 回答
2

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

于 2018-01-23T06:03:24.770 回答
2

这个对我有用！

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

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

于 2018-08-04T07:28:30.467 回答
1

试一试-webkit-appearance:。总之值得一试。

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

希望有帮助:)

于 2012-08-20T10:04:27.580 回答
1

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

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

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

于 2012-08-20T10:05:24.427 回答
1

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

$("input[type=file]").mouseover(function(event) {
    event.preventDefault();
    // This will disable the default behavior of browser
 });
于 2018-09-04T11:20:42.827 回答
0

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

于 2012-08-20T10:09:11.700 回答
0

我为此寻找好的答案......我发现了这个：

首先删除“未选择文件”

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

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

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

希望这是您正在寻找的，它对我有用。

于 2014-05-12T01:28:35.527 回答
0

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

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

和：

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

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

于 2014-09-09T15:54:29.170 回答
0

对我来说，最好的解决方案是将输入 [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>

于 2015-08-30T14:50:19.867 回答
0

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

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

<input style="float:left; **width:88px;** **color:#000000;**" type="file" id="fileInput" onclick="fileOpen()">
于 2017-11-29T08:01:15.207 回答
0

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

于 2020-08-26T17:37:45.470 回答
0

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

  1. 在输入上：（color:white;如果背景是白色以使文本颜色失明，如果是另一种颜色，则使用该颜色）。

  2. 如果输入旁边有任何其他元素，请position: absolute;将该元素放在工具提示上方 *（小心让按钮保持可见，仅隐藏工具提示）

于 2021-08-07T21:48:14.433 回答
0

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

创建您的输入元素：

<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>

于 2021-11-13T23:41:40.747 回答