Passen Sie den Stil des Elements <input type="file"> an, das beim Hochladen von Dateien in HTML verwendet wird

Auf einer Webseite wird das Element <input type="file"> grundsätzlich beim Hochladen von Dateien verwendet. Sein Standardstil ist:

Unter Chrome:

Im Internet Explorer:

Unabhängig von dem oben genannten ist der Stil relativ einfach und passt nicht zum Stil vieler Webseiten.

Es gibt viele Gelegenheiten, den Anzeigestil entsprechend den Benutzeranforderungen und dem Designstil zu ändern.

Wenn Sie eine Upload-Schaltfläche im Bootstrap-Stil wie die folgende erstellen möchten, wie können Sie sie implementieren?

Grundlegende Elemente zum Erstellen einer Upload-Schaltfläche

Effekt (Chrom):

Was Sie jetzt sehen, wird in zwei Zeilen angezeigt.

Der Grund, warum die Peripherie nicht durch ein Div ersetzt wird, liegt darin, dass im IE7-Browser, sofern sie nicht auf Inline eingestellt ist, ihre Breite auf die maximal mögliche Breite erweitert wird. Wenn es auf Inline eingestellt ist, kann die Breite des Elements nicht angepasst werden. Daher kann die Verwendung von „span“ und die Einstellung auf „Inline-Block“ dieses Problem lösen.

Fügen Sie Stil hinzu, um zwei Zeilen in eine Zeile umzuwandeln

CSS:

Wirkung:

Standardmäßig ist kein hellblauer Rand vorhanden. Dieser wird erst nach einem Mausklick angezeigt. Zur besseren Übersicht wird er hier angezeigt.

Indem Sie den äußeren Bereich auf „display:relative“ und die Eingabe auf „display:absolute“ setzen, werden sie alle aus dem Dokumentfluss entfernt.

Durch die Beschränkung der Eingabe auf den äußeren Bereich und die Durchführung einer absoluten Positionierung wird die ursprüngliche zweizeilige Anzeige in eine einzeilige Anzeige geändert.

Tatsächlich ist es hier übergelaufen. Die tatsächliche Breite ist die Breite des „Upload“-Textes. Ändern Sie den Stil der Dateieingabeschaltfläche, um „overflow: hidden“ hinzuzufügen.

Wirkung:

Sehr interessant. Man sieht oben und rechts den blauen Rand, der den Überlauf links und unten tatsächlich verbirgt.

Wenn Sie zu diesem Zeitpunkt mit der Maus auf das Wort „Hochladen“ klicken, klickt man tatsächlich auf die Eingabe, wodurch das Dialogfeld „Öffnen“ angezeigt werden kann, da die Eingabe in der Anzeigehierarchie näher am Benutzer liegt als „Hochladen“.

Beachten Sie die rechte Position bei der Eingabe. Warum verwenden Sie nicht die linke Position?

Wenn wir nach links wechseln.

Effekt (Chrom):

Wirkung (IE):

In Chrome wird die Auswahlschaltfläche im Eingabeelement angezeigt. Das spielt jedoch keine Rolle. Sie können sie später transparent machen, indem Sie die Transparenz festlegen.

Das Eingabefeld wird jedoch im IE angezeigt. Der Schlüssel besteht darin, dass der Zeiger in den Eingabezustand wechselt, wenn die Maus zum Eingabefeld bewegt wird, was sehr schwierig zu handhaben ist.

Indem Sie das Eingabefeld mit der richtigen Positionierungsmethode nach links verschieben, können Sie verhindern, dass der Mauszeiger im IE in den Eingabezustand wechselt.

Transparentes Eingabeelement

CSS:

Wirkung:

Die Eingabe ist komplett weg, der Klick auf "Hochladen" funktioniert aber noch.

Kann IE8+ unterstützen.

Bootstrap importieren und Schaltflächenstile hinzufügen

Fügen Sie im Kopf Verweise auf externes CSS und JS hinzu.

Schaltflächenstil hinzufügen.

Wirkung:

Das Größenproblem lösen

Wenn Sie width:100px zum Stil der Dateieingabeschaltfläche hinzufügen und den äußeren Bereich auf 100px Breite einstellen, werden Sie feststellen, dass beim Klicken auf den unteren Teil keine Reaktion erfolgt. Der Grund dafür ist, dass die Eingabe die Standardgröße hat und den unteren Teil nicht abdecken kann.

Sie können das Überlappungsproblem lösen, indem Sie eine große Schriftgröße für die Eingabe festlegen, um sie zu erweitern. Hier haben wir sie auf 200 Pixel festgelegt.

Dadurch wird das Abdeckungsproblem gelöst.

Beenden.

Referenz: jQuery-File-Upload

Wenn Sie mit IE7 kompatibel sein möchten, können Sie auf die Schreibmethode in jQuery-File-Upload verweisen.

Code: