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', '');Antworten:
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, ''))
}) 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.
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 ? ' ' : '');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');
});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=" "/>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-buttonVersuchen 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.
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/
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()">