Wenn Sie an Webkit/Blink/Chrome-spezifischem Styling interessiert sind, gibt es ein proprietäres Pseudoelement zum Ausblenden und dann ein ebenfalls nicht standardmäßiges Pseudoelement für ein Eingabefeld.
<input class="custom-file-input" type="file">.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select some files';
display: inline-block;
background: linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}Demo
Warnung: Es wird Ihnen nicht der Name der ausgewählten Datei angezeigt, aber Sie können es möglicherweise anpassen, um dies zu erreichen. Ich stelle fest, dass man heutzutage normalerweise ein Ereignis nach der Dateiauswahl auslöst und die Daten auf diese Weise abruft.
WTF Forms
Es lohnt sich immer, auch nachzusehen, wie WTF Forms es macht.
Sie könnten auch an dem Styling gängiger Formularelemente oder der Formular-Eingabevalidierung bei DigitalOcean interessiert sein.
Beim Klicken auf die Schaltfläche gibt es einen zusätzlichen Rand, der orangefarben ist. Können Sie mir bitte sagen, wie ich diesen entfernen kann?
verwenden Sie outline: none;
Schreiben Sie in CSS outline:none;, Ihr Problem wird gelöst. Diese orangefarbene Standardfarbe wird nicht erscheinen.
Danke fürs Teilen. Es gibt einen kleinen Fehler im Code.
Muss sein
Habe das behoben, danke!
Gibt es eine Möglichkeit, den Text "Keine Datei ausgewählt", der vom Browser kommt, zu entfernen?
Es gibt einen zusätzlichen Platz darum herum, der in meinem Anwendungsfall stört. Gibt es eine Möglichkeit, ihn zu entfernen?
(Bild ansehen) http://www.abload.de/img/bildschirmfoto2014-01asxy4.png
Ich habe auch bemerkt, dass nach dem Pseudoelement
:beforeein zusätzlicher unsichtbarer (aber klickbarer) Bereich vorhanden ist.Tatsächlich ist dieser "zusätzliche" Bereich das eigentliche Datei-Eingabefeld.
Ich habe dieses Problem gelöst, indem ich dem Haupteingabefeld
visibility: hiddenunddem Pseudoelement
visibility: visible(zusammen mit der `absolute`-Positionierung) zugewiesen habe.In diesem Fall gibt es keinen unsichtbaren Leerraum mehr, obwohl Ihr Pseudoelement tatsächlich aus dem Hauptfluss läuft, was für Sie je nach Situation akzeptabel sein kann oder nicht.
Fiddle: http://jsfiddle.net/GALPG/
Danke Pawel, das hat gut funktioniert. Firefox scheint dieses Problem nicht zu haben: Sie können die Eingabe beliebig breit machen.
Hey, mit Pawels Fix habe ich die Ereignisbehandlung bereitgestellt.
http://jsfiddle.net/GALPG/16/
Nein
Es funktioniert nicht in IE 9 :-(
Siehe Titel des Snippets.
Ich möchte wissen, in welchen Browsern das funktionieren wird?
@henry es sollte in Safari und Chrome funktionieren (sowie in jeder anderen Anwendung, die ihre Rendering-Engines verwendet). Es wird nicht in IE funktionieren, da diese eine andere Rendering-Engine verwendet.
Danke Chris. Das lästige IE ruiniert immer die Party! Aber trotzdem eine gute Lösung.
Dieses "benutzerdefinierte Eingabefeld" funktioniert nicht in Firefox. Firefox verwendet die Standard-Stylings.
Gibt es eine Möglichkeit, den Cursor-Typ zu ändern, wie z.B. (cursor:pointer)?
Ich habe die Antwort gefunden.
.custom-file-input {
color: transparent; cursor: pointer!important;
}
Danke. Es ist sehr einfach zu bedienen.
alternative Lösung
funktioniert nicht in IE..
Siehe Titel des Snippets.
Haben Sie einen Screenshot davon gemacht, wie es aussehen soll? Unter Firefox 30.0 mit Ubuntu 14.10 sehe ich nur Folgendes: http://i.imgur.com/Bwh0oeP.png
Dies zeigt einen ungestylten "Durchsuchen"-Button im Firefox, den ich benutze, welcher der aktuellste ist...
Siehe Titel des Snippets.
webkit blink
Das Styling des Input-Typs-Datei auf diese Weise war sehr einfach, da nur CSS verwendet wurde. Es hat meine Frage gelöst.
Wie können wir den Namen und den Typ der ausgewählten Datei anzeigen? D.h. wenn ich eine Bilddatei mit dem Namen xyz auswähle, sollte sie als xyz.jpg angezeigt werden.
Hallo, vielen Dank für den Code. Ich habe jedoch ein Problem. Da meine Website in verschiedenen Sprachen sein wird, kann ich die CSS-Eigenschaft "content" nicht verwenden, da der Text in verschiedenen Sprachen sein wird. Gibt es eine Alternative? Danke!
Ich habe etwas erstellt, das in einem solchen Fall etwas hilfreicher ist, ein jQuery-Plugin, das Ihnen die Möglichkeit gibt, alles an Ihrem Eingabefeld zu stylen, und es auch über ein paar Callbacks steuert :). Ich hoffe, das hilft jemandem.
Hier ist die Quelle auf GitHub: Simple Input File
Wie kann ich die Reihenfolge der Elemente umkehren? Ich meine, wie kann ich die Schaltfläche links und den Dateipfad-Text rechts setzen?
Der Dateiname wird nicht angezeigt. Können wir einen Indikator hinzufügen, wenn eine Datei ausgewählt wurde?
Dieser Trick ist sehr hilfreich, danke ...
Kind, Input-Tags können keine Pseudoelemente wie img-Tags aufnehmen.
Auf Browsern, auf denen dies nicht funktioniert... Sie können den eigentlichen Button überlagern.
Die Essentials sind:
1. Das Eingabeelement und das Overlay-
<div>müssen positioniert sein (damit z-order funktioniert).2. Das Overlay muss eine höhere z-order haben.
3. Das Overlay muss `pointer-events:none` haben.
Mit freundlichen Grüßen,
TonyWilk
Dies funktioniert in neueren Browsern, aber vergessen Sie nicht, dass ältere IE-Versionen `pointer-events:none` nicht unterstützen.
Die Art, wie ich das mache, ist:
1) Benutzerdefiniertes gestyltes Element mit z-index:0
2) Datei-Eingabe absolut darüber positionieren mit z-index:1
3) Datei-Eingabe auf opacity:0 setzen, damit sie nicht sichtbar ist.
Demo hier: http://jsfiddle.net/wuguf376/
Oder blenden Sie es aus und verwenden Sie ein gestyltes " als Klicker.
http://codepen.io/rosscosack/pen/opHxF
Nette Idee ;)
Sehr cooler Trick!
es ist einfacher als die weit verbreitete Methode, die unter Quirksmode.org erklärt wird.
Es funktioniert jedoch nicht mit Firefox, das den Standardbutton mit der Beschriftung "Durchsuchen" anzeigt, abhängig von der Installationssprache des Browsers, und einer Beschriftung "Keine Datei ausgewählt", solange keine Datei ausgewählt ist (wenn eine Datei ausgewählt wird, wird sie durch den Dateinamen ersetzt).
Wäre es zumindest möglich, diese Beschriftung auszublenden? Um nur den Standard-Browserbutton anzuzeigen?
Vielen Dank im Voraus für Ihre freundliche Hilfe (ich bin kein CSS-Experte).
Ist das nicht browserfreundlich???
Ich habe Probleme beim Ausführen in Firefox.
Danke
Siehe Titel des Snippets.
(Ich spiele nur zum Spaß :))
Hallo,
Das funktioniert wirklich gut mit Chrome. Gibt es eine Lösung für den Mozilla-Browser?
Was für Mozilla: moz? Und für IE und Opera?
Funktioniert nicht in Firefox....
.custom-file-input:before funktioniert nicht... Vorschläge?
Funktioniert nicht in Firefox
Ich schätze, nicht viele Entwickler wissen, was WebKit/Blink bedeutet. Wenn ich nur eine Gehaltserhöhung für das Wissen darüber bekäme, da so viele es nicht tun...
Oder vielleicht sind sie einfach Teil der "Mach es selbst"-Gangs.
Jeder Webentwickler, der nicht weiß, was WebKit/Blink ist, ist kein Webentwickler :P
Hallo, vielen Dank. Das hat geholfen!
Jungs, schlagt mir etwas vor, wie können wir auch den ausgewählten Dateinamen nach der Browse-Schaltfläche mit CSS und HTML anzeigen.
function example() {
location.href = ‘http://youtube.com’;
}
In beiden Beispielen sehe ich nicht, welche Datei gerade ausgewählt ist (Firefox unter Windows 10).
In diesem Sinne ist die Erfahrung schlechter als mit dem Vanilla-Dateiuploader.
Versuchen Sie ::-ms-browse für IE, hat in IE11 funktioniert.
Der Dateiname ("Keine Dateien ausgewählt") erscheint hinter dem Label. :/
Setzen Sie eine größere Breite für das unsichtbare Element
Für 2022er Leute, die spät dran sind wie ich, gibt es jetzt ein standardmäßiges (browserübergreifendes) Pseudoelement.
input[type="file"]::file-selector-button {/* benutzerdefiniertes CSS */
}