Wie kann ich den Tooltip "Keine Datei ausgewählt" aus einer Dateieingabe in Chrome entfernen?

Ich möchte den Tooltip "Keine Datei ausgewählt" aus einer Dateieingabe in Google Chrome entfernen (ich sehe, dass in Firefox kein Tooltip angezeigt wird).

Bitte beachten Sie, dass ich nicht über den Text im Eingabefeld spreche, sondern über den Tooltip, der angezeigt wird, wenn Sie die Maus über die Eingabe bewegen.

Ich habe das ohne Glück versucht:

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

Dies ist ein nativer Teil der Webkit- Browser und kann nicht entfernt werden. Sie sollten über eine hackige Lösung nachdenken, wie das Abdecken oder Ausblenden der Dateieingaben.

Eine hackige Lösung:

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, ''))
})    

Geige

Der Standard-Tooltip kann mithilfe des title-Attributs bearbeitet werden

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

Aber wenn Sie versuchen, diesen Tooltip zu entfernen

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

Das wird nicht funktionieren. Hier ist mein kleiner Trick, um dies zu tun. Versuchen Sie es mit einem Leerzeichen. Es wird klappen.:)

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

Für mich wollte ich nur, dass der Text unsichtbar ist und trotzdem die native Browser-Schaltfläche verwendet.

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

Ich mag alle Vorschläge von undefined, aber ich hatte einen anderen Anwendungsfall. Ich hoffe, dies hilft jemandem in der gleichen Situation.

Ich habe eine Lösung gefunden, die sehr einfach ist. Setzen Sie einfach eine leere Zeichenfolge in das title-Attribut.

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

Sie können den Tooltip deaktivieren, indem Sie einen Titel mit einem Leerzeichen in Webkit-Browsern wie Chrome und einer leeren Zeichenfolge in Firefox oder IE festlegen (getestet in Chrome 35, FF 29, IE 11, Safari Mobile).

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

Sehr einfach, vergessen Sie CSS, das auf die Eingabe ["Typ"] abzielt, es funktioniert bei mir nicht. Ich weiß nicht warum. Ich habe meine Lösung in meinem HTML-Tag

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

Ende des Problems

Alle Antworten hier sind völlig überkompliziert oder auf andere Weise einfach völlig falsch.

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/

Ich habe diese Geige auf einfachste Weise erschaffen. Durch Klicken auf die Schaltfläche Datei auswählen wird das Menü zur Dateiauswahl geöffnet. Sie können die Schaltfläche dann beliebig stilisieren. Grundsätzlich müssen Sie nur die Dateieingabe ausblenden und einen synthetischen Klick darauf auslösen, wenn Sie auf eine andere Schaltfläche klicken. Ich habe dies vor Ort auf IE 9, FF und Chrome getestet, und alle funktionieren einwandfrei.

Dieser funktioniert für mich (zumindest in Chrome und Firefox):

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

Dies ist eine schwierige Frage. Ich konnte keine Möglichkeit finden, das Element "Keine Datei ausgewählt" auszuwählen, daher habe ich eine Maske mit dem Pseudo-Selektor: after erstellt.

Meine Lösung erfordert auch die Verwendung des folgenden Pseudo-Selektors, um die Schaltfläche zu formatieren:

::-webkit-file-upload-button

Versuchen Sie Folgendes : http://jsfiddle.net/J8Wfx/1/

Zu Ihrer Information: Dies funktioniert nur in Webkit-Browsern.

PS: Wenn jemand weiß, wie man Webkit-Pseudo-Selektoren wie die oben im Webkit-Inspektor anzeigt, lass es mich wissen

Über alle Browser hinweg und einfach. das hat es für mich getan

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

Sie müssen das Steuerelement ziemlich anpassen, um dies zu erreichen.

Bitte folgen Sie der Anleitung unter: http://www.quirksmode.org/dom/inputfile.html

Mit einwickeln und unsichtbar machen. Arbeiten Sie in Chrome, Safari && FF.

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

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

Es ist besser, unnötiges Javascript zu vermeiden. Sie können das Label-Tag nutzen, um das Klickziel der Eingabe folgendermaßen zu erweitern:

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

Auch wenn die Eingabe ausgeblendet ist, fungiert der Link weiterhin als Klickziel, und Sie können ihn nach Belieben formatieren.

Selbst wenn Sie die Deckkraft auf Null setzen, wird der Tooltip angezeigt. Probiere visibility:hiddendas Element an. Es funktioniert für mich.

Probieren -webkit-appearance:Sie es aus. Trotzdem einen Versuch wert.

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

Hoffentlich hilft das :)

Direkt können Sie nicht viel an der Eingabe ändern [type = file].

Stellen Sie die Deckkraft der Eingabetypdatei auf 0 und versuchen Sie, ein relatives Element [div / span / button] mit benutzerdefiniertem CSS darüber zu platzieren

Versuchen Sie dies http://jsfiddle.net/gajjuthechamp/pvyVZ/8/

Für mich geht das!

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

Dann können Sie verschiedene Arten von Arten verwenden wie width, heightoder anderen Eigenschaften, um Ihre eigene Eingabedatei zu erstellen.

Überraschung, dass niemand davon erwähnt wurde event.preventDefault()

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

Sie können eine Breite für Ihr Element festlegen, die nur die Schaltfläche anzeigt und die Meldung "Keine Datei ausgewählt" ausblendet.

Ich suche nach einer guten Antwort darauf ... und fand diese:

Löschen Sie zuerst die Option "Keine Datei ausgewählt".

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

Dann betätigen Sie den Knopf mit dem -webkit-file-upload-button:

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

hoffe, das ist was du gesucht hast, es funktioniert für mich.

Ich habe einige der oben genannten Vorschläge mit jQuery kombiniert und Folgendes getan:

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

Und:

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

Und setzen Sie die Klasse "unbenutzt" in Ihre Dateieingaben. Das ist einfach und funktioniert ziemlich gut.

Die beste Lösung für mich ist, die Eingabe [type = "file"] in einen Wrapper zu packen und einen JQuery-Code hinzuzufügen:

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

Ich habe eine hackige Lösung entwickelt, die "Keine Datei ausgewählt" sowie den zusätzlichen Speicherplatz, der nach diesem Text hinzugefügt wird, vollständig entfernt (in Chrome wird Folgendes angezeigt: "Keine Datei ausgewählt").

Dies hat meine Seitenausrichtung total durcheinander gebracht, also habe ich wirklich damit gekämpft, um eine Lösung zu finden. Wenn Sie im Stilattribut des Eingabe-Tags "width" auf die Breite der Schaltfläche einstellen, werden der nachfolgende Text und die Leerzeichen entfernt. Da die Breite der Schaltfläche nicht in allen Browsern gleich ist (z. B. in Firefox etwas kleiner), sollten Sie auch die Farbe des Stils auf die gleiche Farbe wie den Hintergrund der Seite einstellen (ansonsten ein Streuner). Nein "darf durchscheinen). Mein Eingabedatei-Tag sieht folgendermaßen aus:

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

Ich weiß, dass es ein kleiner Hack ist, aber alles, was ich brauchte, war, die Farbe im Stylesheet auf transparent zu setzen - Inline würde so aussehen = style = "color: transparent;".