So bedienen Sie den Eingabefeldstil type='file'

Dieses Mal zeige ich Ihnen, wie Sie den Eingabefeldstil „type“ bedienen. Was sind die Vorsichtsmaßnahmen, wenn Sie den Eingabefeldstil „type“ bedienen? Praktischer Koffer. Stehen Sie auf und werfen Sie einen Blick darauf.

Was ist die Eingabe von type="file"?

Ich glaube nicht, dass man sagen muss, was das ist, jeder kennt es sowieso und im Zeitalter verschiedener Mobiltelefone kann man es auch hochladen, indem man direkt Fotos macht, was viel mehr Spaß macht als zuvor.

Und in der Vergangenheit konnten Sie nur eine Datei hochladen, indem Sie das Mehrfachattribut hinzufügen, und es werden ohne weiteres viele Dateiformate unterstützt, siehe

Jeder, der mit CSS gespielt hat, weiß, dass es unter den

HTML-Elementen am schwierigsten ist, den Stil der Formularsteuerelemente zu ändern. Der Stil vieler Steuerelemente wird je nach Systemthema geändert . Wenn Sie es ändern möchten, kann dies nur durch Simulation implementiert werden, insbesondere im IE-Browser.

Für den Upload-Button type="file" haben wir einmal den Stil geändert. Einige Leute haben die Simulationsmethode verwendet, aber es wird gesagt, dass die Verwendung der Simulationsmethode sogenannte Sicherheitsprobleme verursachen kann, okay, zum Beispiel Wenn ich ein Typ bin, der wie ich Seiten und Bilder schneidet, verstehe ich das nicht, und selbst wenn ich es verstehe, weiß ich nicht, wie ich damit umgehen soll. Dann simulieren Sie es nicht...

Aber wie können Sie den Stil ändern, wenn Sie es nicht simulieren?

Bildpositionierungs-Overlay-Schema

Vorher war die Methode, die ich kannte und die eigentlich jeder kennt, darin, den Upload-Button mit „type="file" transparent zu machen und ihn dann über ein Bild zu legen , Dies kann den Leuten das Gefühl geben, dass dies durch Klicken zum Hochladen des Bildes erreicht wird und es nicht erforderlich ist, auf die native Schaltfläche zum Hochladen zu achten.

<input type="file" id="upfile" ><span ></span>.up_icon,.up_input {position: absolute;top: 10px;left: 10px;width: 64px;height: 64px;z-index: 2}.up_icon {overflow: hidden;font-size: 0;line-height: 99em;background: url(http://sfault-image.b0.upaiyun.com/346/967/3469672357-54250d7235406_articlex) no-repeat 0 0;z-index: 1;}

In diesem Code sollte deutlich erkennbar sein, dass Sie die Implementierungsmethode über dem Bild positionieren können. Das Bild kann als Hintergrundbild eines leeren Etiketts verwendet werden , und dann den Upload-Button setzen Nachdem Sie die Deckkrafttransparenz auf 0 gesetzt haben, können Sie den Button nicht mehr sehen, aber er existiert tatsächlich, und dann ... dann ... gibt es nichts mehr und der Effekt ist da ...

Eine Lösung für den Webkit-Kernel

Diese Lösung für den Webkit-Kernel ist eigentlich etwas lächerlich und hat wenig praktischen Nutzen, da sie nur für den Webkit-Kernel wirksam ist, wenn dies nicht der Fall ist Wenn Sie die Schreibmethode mit dem Präfix -webkit- unterstützen, hat dies keine Auswirkung, Sie können es also einfach als Unterhaltung betrachten.

<input type="file" id="upfile">input[type="file"]::-webkit-file-upload-button {position: absolute;top: 10px;left: 10px;width: 64px;height: 64px;overflow: hidden;line-height: 99em;background:url(http://sfault-image.b0.upaiyun.com/346/967/3469672357-54250d7235406_articlex) no-repeat 0 0;border: 0 none;z-index: 2;}

Die HTML-Struktur in diesem Code ist sehr einfach. Nur ein [

Eingabe-Tag ist viel einfacher als die zuvor gesehene Methode, aber aus Kompatibilitätsgründen ist sie definitiv viel anders . Ich weiß nicht, wie es auf dem Mobiltelefon ist. Heutzutage verwenden die meisten Mobiltelefone Webkit-basierte Browser. Betrachten wir es einfach als Unterhaltung und haben Sie Spaß beim Anschauen ~

Einfache HTML-Struktur Der Änderungsstil hängt vollständig vom Pseudoelement ::-webkit-file-upload-button ab. Nehmen Sie einfach entsprechende Änderungen am Stil dieses Pseudoelements vor, da es sich lediglich um ein gewöhnliches Schaltflächenelement handelt. Es wird klarer, wenn wir dieses Schaltflächenelement betrachten, indem wir das Schatten-DOM anzeigen.

Dies ist der DOM-Baum, der in den Chrome-Entwicklertools angezeigt wird. Wenn wir die Anzeige des Schatten-DOM nicht aktivieren, können wir im Allgemeinen nicht erkennen, dass eine Eingabe vom Typ „Datei“ so viel enthält Inhalt. . Die Aktivierung ist ganz einfach: Klicken Sie einfach auf das Zahnrad in der oberen rechten Ecke der Entwicklertools und aktivieren Sie dann dieses Kontrollkästchen in der Popup-Ebene.

Jetzt können Leser andere Eingabe-Tags selbst überprüfen. Wenn ein Schatten-DOM vorhanden ist, kann es definitiv erweitert werden. Dann gibt es unter den neuen HTML5-Tags einige ...

Schließlich

Für das Eingabe-Tag von type="file" kann derzeit, soweit ich weiß, der Stil geändert werden Nur diese beiden, und die Lösung für Webkit ist ebenfalls sehr begrenzt, aber für das Mobiltelefon sollte es kein Problem sein. Manche Leute fragen sich vielleicht: Was soll ich mit anderen Browsern machen? Ja, ich weiß nicht, was ich tun soll.

Im Firefox-Browser gibt es zwar einen Selector-Eingabetyp="file" > button[type="button"] in der Datei "forms.css", aber ich weiß nicht warum, ich habe ihn in meinem Eigener Stil Nachdem ich diesen Selektor hinzugefügt hatte, sah ich immer noch keinen Effekt, also habe ich aufgehört zu spielen.

PS: Wenn Sie ein Fan des Firefox-Browsers sind, müssen Sie für die Datei form.css die Existenz der Pfadressource://gre-resources/forms.css kennen.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So lösen Sie das Problem der unvollständigen Anzeige vertikaler Textspalten in HTML

Anleitung HTML verwenden Ein Hyperlink öffnet ein neues Fenster und steuert die Eigenschaften des Fensters

So verwenden Sie den Stil, um Attribute in HTML hinzuzufügen

Das obige ist der detaillierte Inhalt vonSo bedienen Sie den Eingabefeldstil type='file'. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!