Como posso remover a dica de ferramenta “Nenhum arquivo escolhido” de uma entrada de arquivo no Chrome?

Gostaria de remover a dica de ferramenta "Nenhum arquivo escolhido" de uma entrada de arquivo no Google Chrome (vejo que nenhuma dica de ferramenta é exibida no Firefox).

Observe que não estou falando sobre o texto dentro do campo de entrada, mas sobre a dica de ferramenta que aparece quando você move o mouse sobre a entrada.

Eu tentei isso sem sorte:

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

Esta é uma parte nativa dos navegadores do webkit e você não pode removê-la. Você deve pensar em uma solução hacky, como cobrir ou ocultar as entradas do arquivo.

Uma solução 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, ''))
})    

Violino

A dica de ferramenta padrão pode ser editada usando o atributo title

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

Mas se você tentar remover esta dica de ferramenta

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

Isso não vai funcionar. Aqui está meu pequeno truque para resolver isso, tente o título com um espaço. Vai funcionar.:)

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

Para mim, eu só queria que o texto ficasse invisível e ainda usasse o botão nativo do navegador.

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

Eu gosto de todas as sugestões de undefined, mas eu tinha um caso de uso diferente, espero que isso ajude alguém na mesma situação.

Eu encontrei uma solução que é muito fácil, basta definir uma string vazia no atributo title.

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

Você pode desativar a dica de ferramenta definindo um título com um espaço em navegadores webkit como o Chrome e uma string vazia no Firefox ou IE (testado no Chrome 35, FF 29, IE 11, safari mobile)

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

Muito fácil, esqueça o CSS visando a coisa de entrada ["tipo"], não funciona para mim. Não sei por quê. Eu tenho minha solução na minha tag HTML

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

Fim do problema

Todas as respostas aqui são totalmente complicadas ou totalmente erradas.

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/

Eu criei este violino, da maneira mais simplista. Clicar no botão Selecionar arquivo abrirá o menu de seleção de arquivo. Você pode estilizar o botão da maneira que desejar. Basicamente, tudo o que você precisa fazer é ocultar a entrada do arquivo e acionar um clique sintético nele ao clicar em outro botão. Eu testei isso no IE 9, FF e Chrome, e todos eles funcionam bem.

Este funciona para mim (pelo menos no Chrome e Firefox):

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

Este é complicado. Não consegui encontrar uma maneira de selecionar o elemento 'nenhum arquivo escolhido', então criei uma máscara usando o pseudo seletor: after.

Minha solução também requer o uso do seguinte pseudo seletor para estilizar o botão:

::-webkit-file-upload-button

Experimente: http://jsfiddle.net/J8Wfx/1/

FYI: Isso só funcionará em navegadores webkit.

PS: se alguém souber como visualizar os pseudo seletores do webkit como o acima no inspetor do webkit, por favor me avise

Em todos os navegadores e simples. isso fez por mim

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

Você precisará personalizar bastante o controle para conseguir isso.

Siga o guia em: http://www.quirksmode.org/dom/inputfile.html

Enrole com e torne o invisível. Trabalhe no Chrome, Safari && FF.

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

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

É melhor evitar o uso de javascript desnecessário. Você pode aproveitar as vantagens da etiqueta de rótulo para expandir o destino de clique da entrada, como:

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

Mesmo que a entrada esteja oculta, o link ainda funciona como um alvo de clique para ele e você pode estilizá-lo como quiser.

Mesmo que você defina a opacidade como zero, a dica de ferramenta aparecerá. Experimente visibility:hiddeno elemento. Está funcionando para mim.

Funciona para mim!

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

Então, você pode usar diferentes tipos de estilos como width, heightou outras propriedades, a fim de criar o seu próprio arquivo de entrada.

Dê -webkit-appearance:uma chance. Vale a pena tentar de qualquer maneira.

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

Espero que ajude :)

Diretamente, você não pode modificar muito sobre a entrada [type = file].

Torne a opacidade do arquivo do tipo de entrada: 0 e tente colocar um elemento relativo [div / span / botão] sobre ele com CSS personalizado

Experimente http://jsfiddle.net/gajjuthechamp/pvyVZ/8/

Surpresa ao ver ninguém mencionado sobre event.preventDefault()

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

você pode definir uma largura para seu elemento, que mostrará apenas o botão e ocultará o "arquivo não escolhido".

Procuro uma boa resposta para isto ... e encontrei isto:

Primeiro exclua o 'nenhum arquivo escolhido'

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

em seguida, pressione o botão com o -webkit-file-upload-button, desta forma:

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

espero que seja isso que você estava procurando, funciona para mim.

Combinando algumas das sugestões acima, usando jQuery, aqui está o que fiz:

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

E:

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

E coloque a classe "não utilizada" em suas entradas de arquivo. Isso é simples e funciona muito bem.

A melhor solução, para mim, é envolver input [type = "file"] em um wrapper e adicionar algum código 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>

Eu vim com uma solução hacky que remove totalmente "Nenhum arquivo escolhido" mais o espaço extra que é adicionado após esse texto (no Chrome eu recebo algo como: "Nenhum arquivo escolhido").

Isso estava bagunçando totalmente o alinhamento da minha página, então eu realmente lutei com isso para encontrar uma solução. Dentro do atributo de estilo da tag de entrada, definir "largura" para a largura do botão eliminará o texto e os espaços finais. Uma vez que a largura do botão não é a mesma em todos os navegadores (é um pouco menor no Firefox, por exemplo), você também deseja definir a cor do estilo para a mesma cor do fundo da página (caso contrário, um " Não "pode ​​aparecer). Minha tag de arquivo de entrada tem a seguinte aparência:

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

Eu sei que é um pouco hack, mas tudo que eu precisava era definir a cor como transparente na folha de estilo - inline ficaria assim estilo = "color: transparent;".