Comment puis-je supprimer L'info-bulle "aucun fichier choisi" d'une entrée de fichier dans Chrome?

Pour moi, je voulais juste que le texte soit invisible et utilise toujours le bouton du navigateur natif.

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

J'aime toutes les suggestions d'undefined mais j'ai eu un cas d'utilisation différent, j'espère que cela aide quelqu'un dans la même situation.

L'info-bulle par défaut peut être modifiée à l'aide de l'attribut title

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

, Mais si vous essayez de supprimer cette info-bulle

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

Cela ne fonctionnera pas. Voici mon petit truc pour travailler cela, essayez le titre avec un espace. Il va travailler.:)

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

Vous pouvez désactiver l'infobulle définissant un titre avec un espace sur les navigateurs webkit comme Chrome et une chaîne vide sur Firefox ou IE (testé sur Chrome 35, FF 29, IE 11, safari mobile)

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

C'est délicat. Je n'ai pas pu trouver un moyen de sélectionner l'élément' no file chosen', j'ai donc créé un masque en utilisant le pseudo-sélecteur: after.

Ma solution nécessite également l'utilisation du pseudo sélecteur suivant pour styliser le bouton:

::-webkit-file-upload-button

Essayez ceci: http://jsfiddle.net/J8Wfx/1/

FYI: cela ne fonctionnera que dans les navigateurs webkit.

P. S Si quelqu'un sait comment afficher les pseudo-sélecteurs webkit comme celui ci-dessus dans l'inspecteur webkit, laissez-moi savoir

Dans tous les navigateurs et simple. cela l'a fait pour moi

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

Toutes les réponses ici sont totalement compliquées, ou sinon tout simplement totalement fausses.

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/

J'ai créé ce violon, de la manière la plus simpliste. Cliquer sur le bouton Sélectionner un fichier fera apparaître le menu sélectionner un fichier. Vous pouvez ensuite styliser le bouton comme vous le souhaitez. Fondamentalement, tout ce que vous devez faire est de masquer l'entrée du fichier et de déclencher un clic synthétique lorsque vous cliquez sur un autre bouton. J'ai repéré testé cela sur IE 9, FF et Chrome, et ils fonctionnent tous bien.

Celui-ci fonctionne pour moi (au moins dans Chrome et Firefox):

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

Très facile, oubliez le ciblage CSS de la chose input ["type"], cela ne fonctionne pas pour moi. Je ne sais pas pourquoi. J'ai ma solution dans ma balise HTML

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

Fin du problème

Vous devrez beaucoup personnaliser le contrôle pour y parvenir.

Veuillez suivre le guide à: http://www.quirksmode.org/dom/inputfile.html

J'ai trouvé une solution, est très facile il suffit de définir un espace dans l'attribut title.

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

Donnez un coup à -webkit-appearance:. Vaut la peine d'essayer de toute façon.

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

J'espère que cela aide:)

Directement vous ne pouvez pas modifier beaucoup sur input[type=file].

Make input type file opacity: 0 et essayez de placer un élément relatif [div / span / button] dessus avec CSS personnalisé

Essayez ceci http://jsfiddle.net/gajjuthechamp/pvyVZ/8/

Il vaut mieux éviter d'utiliser du javascript inutile. Vous pouvez profiter de la balise label pour développer la cible de clic de l'entrée comme ceci:

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

Même si l'entrée est masquée, le lien fonctionne toujours comme une cible de clic, et vous pouvez le styliser comme vous le souhaitez.

Envelopper avec et rendre invisible. Travailler dans Chrome, Safari & & FF.

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

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

Même si vous définissez l'opacité à zéro, l'info-bulle apparaîtra. Essayez visibility:hidden sur l'élément. Il est travaillé pour moi.

Vous pouvez définir une largeur pour l'élément yor qui n'affichera que le bouton et cachera le "Aucun fichier choisi".

Je cherche une bonne réponse pour cela... et j'ai trouvé ceci:

Supprimez D'abord le 'Aucun fichier choisi'

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

, Puis travailler le bouton avec le -webkit-file-upload-button, de cette façon:

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

J'espère que c'est ce que vous cherchiez, ça marche pour moi.

En combinant certaines des suggestions ci-dessus, en utilisant jQuery, voici ce que j'ai fait:

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

Et:

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

Et mettez la classe "unused" sur vos entrées de fichier. C'est simple et fonctionne plutôt bien.

La meilleure solution, pour moi, est d'envelopper input [type= "file"] dans un wrapper, et d'ajouter du code 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>

Je suis venu avec une solution hacky qui supprime totalement "aucun fichier choisi" plus l'espace supplémentaire qui est ajouté après ce texte (dans Chrome, je reçois quelque chose comme: "Aucun fichier choisi ").

C'était totalement gâcher l'alignement de ma page, donc je me suis vraiment battu pour trouver une solution. À l'intérieur de l'attribut style de la balise d'entrée, définir "width" sur la largeur du bouton éliminera le texte et les espaces de fin. Puisque la largeur du bouton n'est pas la même dans tous les navigateurs (C'est un peu plus petit dans Firefox, par exemple), vous voudrez également définir la couleur du style sur la même couleur que l'arrière-plan de la page (sinon un "non" errant peut apparaître). Ma balise de fichier d'entrée ressemble à ceci:

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

Ça marche pour moi!

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

Ensuite, vous pouvez utiliser différents types de styles tels que width, height ou d'autres propriétés afin de créer votre propre fichier d'entrée.

Surprise de ne voir personne a mentionné à propos de event.preventDefault()

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