如何从Chrome中的文件input中删除“无文件select”工具提示？
我想从谷歌浏览器中的文件input中删除“无文件select”的工具提示（我看到没有工具提示在Firefox中显示）。
请注意，我所说的不是关于input字段内的文本，而是关于将鼠标移到input上时出现的工具提示。
我已经试过这个没有运气：
$('#myFileInput').attr('title', ''); 这是webkit浏览器的本地部分，您无法删除它。 您应该考虑一个像覆盖或隐藏文件input的黑客解决scheme。
哈克解决scheme：
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, '')) })
小提琴
对我而言，我只是想让文字看不见，仍然使用原生浏览器button。
input[type='file'] { color: transparent; }
我喜欢所有的未定义的build议，但我有一个不同的用例，希望这可以帮助在相同的情况下的人。
默认的工具提示可以使用title属性进行编辑
<input type='file' title="your text" />
但是，如果你尝试删除这个工具提示
<input type='file' title=""/>
这不会工作。 这是我的小窍门，尝试一下这个空间。 它会工作。:)
<input type='file' title=" "/>
您可以禁用工具提示，在Chrome浏览器等浏览器上使用空格设置标题，在Firefox或IE上使用空string（在Chrome 35，FF 29，IE 11，safari mobile上testing）
$('input[type="file"]').attr('title', window.webkitURL ? ' ' : '');
跨所有浏览器和简单。 这是为我做的
$(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">
这个适用于我（至less在Chrome和Firefox中）：
<input type="file" accept="image/*" title=" "/>
您将需要自定义控件相当多实现这一点。
请按照指南： http : //www.quirksmode.org/dom/inputfile.html
这是一个棘手的问题。 我找不到select“no file selected”元素的方法，所以我使用：after伪select器创build了一个掩码。
我的解决scheme还需要使用以下伪select器来设置button的样式：
::-webkit-file-upload-button
试试这个： http : //jsfiddle.net/J8Wfx/1/
仅供参考：这只适用于webkit浏览器。
PS如果有人知道如何在webkit检查器中查看webkit伪select器，请让我知道
这里的所有答案都是过于复杂的，否则就是完全错误的。
HTML：
<div> <input type="file" /> <button>Select File</button> </div>
CSS：
input { display: none; }
JavaScript的：
$('button').on('click', function(){ $('input').trigger('click'); });
我用最简单的方式创造了这个小提琴。 点击select文件button将popup文件select菜单。 然后，您可以任何你想要的方式风格化button。 基本上，所有你需要做的就是隐藏文件input，并点击另一个button时触发合成点击。 我现场在IE 9，FF和Chrome上testing了这个，并且它们都正常工作。
很容易，忘记CSS针对input[“types”]的东西，它不适合我。 我不知道为什么。 我在我的HTML标签中得到了我的解决scheme
<input type="file" style="color:transparent; width:70px;"/>
问题的结束
直接你不能修改很多关于input[type = file]。
使inputtypes文件不透明度为0，并尝试用自定义CSS放置相对元素[div / span / button]
避免使用不必要的JavaScript更好。 您可以利用标签标签来扩展input的点击目标，如下所示：
<label> <input type="file" style="display: none;"> <a>Open</a> </label>
即使input处于隐藏状态，链接仍然可以作为点击目标，而且您可以根据需要设置样式。
你可以为你的元素设置一个宽度，只显示button，并隐藏“不select文件”。
我寻找这个好的答案…我发现这一点：
首先删除'no file selected'
input[type="file"]{ font-size: 0px; }
然后使用-webkit-file-upload-button ，这样：
input[type="file"]::-webkit-file-input-button{ font-size: 16px; /*normal size*/ }
希望这是你正在寻找，它适用于我。
结合上面的一些build议，使用jQuery，这是我做的：
input[type='file'].unused { color: transparent; }
和：
$(function() { $("input[type='file'].unused").click( function() {$(this).removeClass('unused')}); };
把这个类放在你的文件input上。 这很简单，工作得很好。
对我来说，最好的解决scheme是将包装中的input [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，Safari && FF中工作。
label { padding: 5px; background: silver; } label > input[type=file] { display: none; }
<label> <input type="file"> select file </label>
