Zusammenfassung der Stiländerungen des Eingabefelds vom Typ „file“

Ich glaube, man muss nicht erklären, was das ist, das weiß sowieso jeder. Und im Zeitalter der verschiedenen Mobiltelefone kann man Fotos auch direkt hochladen, indem man sie aufnimmt. Das macht viel mehr Spaß als früher.

Früher konnten Sie nur eine Datei hochladen. Jetzt können Sie mehrere Dateien hochladen, indem Sie das Attribut „multiple“ hinzufügen. Dabei werden viele Dateiformate unterstützt. Weitere Informationen finden Sie unter http://www.w3.org/html/ig/zh/wiki/HTML5/number-state#.E6.96.87.E4.BB.B6.E4.B8.8A.E4.BC.A0.E7.8A.B6.E6.80.81

Freunde, die schon mit CSS herumgespielt haben, wissen, dass die Stiländerung von Formularsteuerelementen unter den HTML-Elementen am schwierigsten ist. Die Stile vieler Steuerelemente ändern sich mit dem Systemdesign. Wenn Sie sie ändern möchten, können Sie sie nur simulieren, insbesondere im IE-Browser.

Für den Upload-Button type="file" haben wir einmal seinen Stil geändert. Jemand hat versucht, eine Simulationsmethode zu verwenden, aber es wird gesagt, dass bei der Verwendung einer Simulationsmethode einige sogenannte Sicherheitsprobleme auftreten könnten. Nun, für einen Seitenersteller und Bildschneider wie mich verstehe ich es nicht, und selbst wenn ich es verstehe, weiß ich nicht, wie ich damit umgehen soll. Dann simulieren Sie nicht...

Aber wenn wir nicht simulieren, wie können wir dann den Stil ändern?

Die Methode kannte ich vorher, eigentlich kennt jeder sie. Sie besteht darin, den Upload-Button vom Typ „file“ transparent zu machen und ihn dann über ein Bild zu legen, sodass die Leute spüren, dass das Hochladen des Bildes durch Klicken erfolgt und sie den nativen Upload-Button nicht sehen müssen.

Schauen Sie sich die Demo an: http://jsbin.com/qacijusihivi/1/

Wie das geht, sollte in dieser Demo sehr deutlich werden. Der Upload-Button wird über dem Bild platziert. Das Bild kann als Hintergrundbild für ein leeres Etikett verwendet werden. Anschließend wird die Opazität des Upload-Buttons auf 0 gesetzt, damit der Button nicht zu sehen ist. Tatsächlich existiert er jedoch. Dann... Dann... Es passiert nichts weiter und der Effekt ist erreicht...

Diese Lösung für den Webkit-Kernel ist eigentlich etwas weit hergeholt und nicht sehr praktisch, da sie nur für den Webkit-Kernel gültig ist. Wenn das Schreiben mit dem Präfix -webkit- nicht unterstützt wird, hat es keine Auswirkungen, daher sollte sich jeder dies nur zur Unterhaltung ansehen.

Erster Blick auf die Demo: http://jsbin.com/wicihihabifi/1/

Die HTML-Struktur in dieser Demo ist sehr einfach und verwendet nur ein [ -Eingabetag . Sie ist viel einfacher als die vorherige Methode, aber definitiv weniger kompatibel. Ich weiß nicht, wie sie auf Mobiltelefonen funktioniert. Die meisten Mobiltelefone verwenden mittlerweile WebKit-basierte Browser. Vergiss es, betrachte es einfach als Unterhaltung und genieße es.

Der einfache Änderungsstil der HTML-Struktur hängt vollständig vom Pseudoelement ::-webkit-file-upload-button ab. Nehmen Sie einfach entsprechende Änderungen am Stil dieses Pseudoelements vor, da dies nur ein gewöhnliches Schaltflächenelement ist. Wenn wir dieses Schaltflächenelement durch Anzeige des Schatten-DOM anzeigen, erhalten wir eine klarere Ansicht.

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 sehen, dass eine Eingabe vom Typ „file“ so viel Inhalt enthält. Das Öffnen ist ganz einfach. Klicken Sie auf das Zahnrad in der oberen rechten Ecke des Entwicklertools. , dann aktivieren Sie einfach dieses Kontrollkästchen in der Popup-Ebene.

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

Für das Eingabetag vom Typ „Datei“ sind mir derzeit nur zwei Möglichkeiten bekannt, den Stil zu ändern. Auch die Lösung für WebKit ist sehr begrenzt, für Mobiltelefone sollte das jedoch kein Problem darstellen. Vielleicht fragt sich jemand, was ist mit anderen Browsern? Ja, was ist mit denen? Ich weiß es auch nicht.

Obwohl es im Firefox-Browser in forms.css einen Selektor input type="file" > button[type="button"] gibt, weiß ich nicht, warum. Nachdem ich diesen Selektor zu meinem eigenen Stil hinzugefügt hatte, sah ich immer noch keine Wirkung und habe deshalb nicht weiter damit herumexperimentiert.

PS: Wenn Sie den Firefox-Browser verwenden, müssen Sie für die Datei form.css die Existenz des Pfads resource://gre-resources/forms.css kennen.

Ach ja, es gibt auch einen Opera-Browser. Als ich auf dem Mac gespielt habe, wurde der Stil mit dem Präfix -webkit- direkt übernommen...