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

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

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

我没有运气尝试过这个：

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

这是Webkit浏览器的本机部分，您无法删除它。您应该考虑一种骇人听闻的解决方案，例如覆盖或隐藏文件输入。

一个哈克的解决方案：

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

小提琴

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

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

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

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

这行不通。这是我的小技巧，请尝试使用标题加上空格。它将起作用。

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

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

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

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

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

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

您可以禁用工具提示来设置标题，该标题在Chrome浏览器（如Chrome）的webkit浏览器上带有空格，而在Firefox或IE上则为空字符串（在Chrome 35，FF 29，IE 11，Safari浏览器上经过测试）

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

非常简单，忘记将CSS定位为input [“ type”]东西了，这对我不起作用。我不知道为什么 我在HTML标签中找到了解决方案

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

问题结束

这里的所有答案都过于复杂，否则完全是错误的。

的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上进行了现场测试，它们都可以正常工作。

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

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

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

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

::-webkit-file-upload-button

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

仅供参考：这仅在webkit浏览器中有效。

PS：如果有人知道如何像在Webkit检查器中一样查看Webkit伪选择器，请告诉我

跨所有浏览器而简单。这为我做到了

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

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

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

包裹起来并使其不可见。在Chrome，Safari和＆FF中工作。

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

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

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

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

即使输入被隐藏，该链接仍然可以用作其单击目标，并且可以根据需要设置其样式。

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

给-webkit-appearance:一展身手。无论如何值得一试。

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

希望有帮助:)

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

使输入类型文件的不透明度为0，并尝试使用自定义CSS在其上放置一个相对元素[div / span / button]

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

这个对我有用！

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

然后，你可以使用不同类型的风格，如width，height为了创建自己的输入文件或其他属性。

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

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

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

我为此寻找了很好的答案...我发现了这一点：

首先删除“未选择文件”

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

然后使用来处理按钮-webkit-file-upload-button，方法是：

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

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

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

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

和：

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

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

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

我想出了一个骇人听闻的解决方案，该解决方案可完全删除“未选择文件”以及该文本后添加的额外空间（在Chrome中，我会看到类似“未选择文件”的内容）。

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

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

我知道这有点骇人听闻，但是我所要做的就是在样式表中将颜色设置为透明-内联看起来像是这种style =“ color：transparent;”。