¿Cómo puedo eliminar la información sobre herramientas "Ningún archivo elegido" de una entrada de archivo en Chrome?

Me gustaría eliminar la información sobre herramientas "Ningún archivo elegido" de una entrada de archivo en Google Chrome (veo que no se muestra información sobre herramientas en Firefox).

Tenga en cuenta que no estoy hablando del texto dentro del campo de entrada, sino de la información sobre herramientas que aparece cuando mueve el mouse sobre la entrada.

Intenté esto sin suerte:

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

Esta es una parte nativa de los navegadores webkit y no puede eliminarla. Debería pensar en una solución pirata como cubrir u ocultar las entradas del archivo.

Una solución 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, ''))
})    

Violín

La información sobre herramientas predeterminada se puede editar mediante el atributo de título

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

Pero si intenta eliminar esta información sobre herramientas

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

Esto no funcionará. Aquí está mi pequeño truco para trabajar esto, pruebe el título con un espacio. Funcionará.:)

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

Para mí, solo quería que el texto fuera invisible y aún usara el botón del navegador nativo.

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

Me gustan todas las sugerencias de undefined, pero tuve un caso de uso diferente, espero que esto ayude a alguien en la misma situación.

Encontré una solución que es muy fácil, simplemente establezca una cadena vacía en el atributo de título.

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

Puede deshabilitar la información sobre herramientas configurando un título con un espacio en navegadores webkit como Chrome y una cadena vacía en Firefox o IE (probado en Chrome 35, FF 29, IE 11, safari mobile)

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

Muy fácil, olvídate de CSS apuntando a la entrada ["tipo"], no funciona para mí. No sé por qué. Tengo mi solución en mi etiqueta HTML

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

Fin del problema

Todas las respuestas aquí son totalmente complicadas o simplemente totalmente incorrectas.

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/

Creé este violín, de la manera más simplista. Al hacer clic en el botón Seleccionar archivo, aparecerá el menú de selección de archivo. A continuación, puede estilizar el botón de la forma que desee. Básicamente, todo lo que necesita hacer es ocultar la entrada del archivo y activar un clic sintético cuando haga clic en otro botón. Probé esto en IE 9, FF y Chrome, y todos funcionan bien.

Este me funciona (al menos en Chrome y Firefox):

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

Este es complicado. No pude encontrar una manera de seleccionar el elemento 'sin archivo elegido', así que creé una máscara usando el pseudo selector: after.

Mi solución también requiere el uso del siguiente pseudo selector para diseñar el botón:

::-webkit-file-upload-button

Pruebe esto: http://jsfiddle.net/J8Wfx/1/

FYI: Esto solo funcionará en navegadores webkit.

PD: si alguien sabe cómo ver pseudo selectores de webkit como el anterior en el inspector de webkit, hágamelo saber

En todos los navegadores y simple. esto lo hizo por mi

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

Necesitará personalizar bastante el control para lograr esto.

Siga la guía en: http://www.quirksmode.org/dom/inputfile.html

Envuelva y haga invisible. Trabaja en Chrome, Safari && FF.

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

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

Es mejor evitar el uso de javascript innecesario. Puede aprovechar la etiqueta de etiqueta para expandir el destino de clic de la entrada de la siguiente manera:

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

A pesar de que la entrada está oculta, el vínculo sigue funcionando como destino de clic para él y puede diseñarlo como desee.

Incluso si establece la opacidad en cero, aparecerá la información sobre herramientas. Pruébate visibility:hiddenel elemento. Me está funcionando.

Pruébalo -webkit-appearance:. Vale la pena intentarlo de todos modos.

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

Espero que ayude :)

Directamente, no puede modificar mucho sobre la entrada [tipo = archivo].

Haga que el archivo de tipo de entrada sea opacidad: 0 e intente colocar un elemento relativo [div / span / button] sobre él con CSS personalizado

Prueba esto http://jsfiddle.net/gajjuthechamp/pvyVZ/8/

¡Esto funciona para mi!

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

Luego, puede usar diferentes tipos de estilos como width, heightu otras propiedades, para crear su propio archivo de entrada.

Sorpresa de ver a nadie mencionado event.preventDefault()

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

puede establecer un ancho para su elemento que mostrará solo el botón y ocultará el "archivo no elegido".

Busco una buena respuesta para esto ... y encontré esto:

Primero elimine el 'archivo no elegido'

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

luego trabaje el botón con el -webkit-file-upload-button, de esta manera:

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

Espero que esto sea lo que buscabas, me funciona.

Combinando algunas de las sugerencias anteriores, usando jQuery, esto es lo que hice:

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

Y:

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

Y ponga la clase "sin usar" en las entradas de su archivo. Esto es simple y funciona bastante bien.

La mejor solución, para mí, es envolver input [type = "file"] en un contenedor y agregar algo de 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>

Se me ocurrió una solución hacky que elimina totalmente "Ningún archivo elegido" más el espacio extra que se agrega después de ese texto (en Chrome obtengo algo como: "Ningún archivo elegido").

Esto estaba arruinando totalmente la alineación de mi página, así que realmente luché con eso para encontrar una solución. Dentro del atributo de estilo de la etiqueta de entrada, establecer "ancho" en el ancho del botón eliminará el texto final y los espacios. Dado que el ancho del botón no es el mismo en todos los navegadores (es un poco más pequeño en Firefox, por ejemplo), también querrá establecer el color del estilo en el mismo color que el fondo de la página (de lo contrario, un parásito " No "puede aparecer). Mi etiqueta de archivo de entrada se ve así:

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

Sé que es un truco, pero todo lo que necesitaba era establecer el color en transparente en la hoja de estilo; en línea se vería así style = "color: transparent;".