如何从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="&nbsp;"/> 

您将需要自定义控件相当多实现这一点。

请按照指南: 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'); }); 

http://jsfiddle.net/odfe34n8/

我用最简单的方式创造了这个小提琴。 点击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;"/> 

问题的结束

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

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

希望帮助:)

直接你不能修改很多关于input[type = file]。

使inputtypes文件不透明度为0,并尝试用自定义CSS放置相对元素[div / span / button]

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

避免使用不必要的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>