Diskussion über Stilanpassung und Browserkompatibilitätsprobleme bei der Verwendung des Eingabeelements [type="file"]

Diskussion über Stilanpassung und Browserkompatibilitätsprobleme bei der Verwendung des Eingabeelements [type="file"]
Ich bin vor zwei Tagen beim Bearbeiten der schriftlichen Prüfungsfragen von Baixing.com auf ein solches Problem gestoßen. Ich habe die neuen Funktionen von HTML5 verwendet, um ein vorhandenes Modul von Baixing.com zu implementieren. Nachdem ich eine Weile auf Baixing.com gestöbert hatte, entschied ich mich schließlich für das Formularmodul zum Veröffentlichen von Informationen. Der Grund ist ganz einfach. Es gibt viele neue Funktionen für Formulare in HTML5. Diese neuen Funktionen sind auch sehr praktisch. Schließlich gibt es zu viele Stellen mit Formularen, wie z. B. Registrierung, Anmeldung, Posten … (Hey, ich schweife etwas vom Thema ab.)


Zu diesem Zeitpunkt sah ich dieses Element im Formular auf der ursprünglichen Webseite


Meine erste Reaktion war: „Ha, es ist nur ein Eingabeelement. Ich kann den Stil mit CSS anpassen.“ Dann bereitete ich mich natürlich auf „Rechtsklick“ – „Element untersuchen“ vor, um den spezifischen Stil von Baixing.com anzuzeigen, und fand es später heraus …


Ich muss es falsch geöffnet haben... In diesem Fall muss ich es natürlich selbst tun. Eines kann ich bestätigen: Dieses Formularsteuerelement zum Hochladen von Dateien muss input[type="file"] verwenden. OK, fügen Sie einfach diese Codezeile hinzu:

Code kopieren
Der Code lautet wie folgt:

<Eingabetyp="Datei" />

Aktualisieren im Chrome-Browser:


Es besteht kein Zweifel, dass dies der Standardstil ist, und ich habe festgestellt, dass dieser Standardstil schwer zu ändern ist. Am ärgerlichsten ist, dass verschiedene Browser unterschiedliche Standardstile haben. Dies ist auf einem Bild im Internet sehr deutlich zu erkennen:


(Ich sage also, Sie Browser sind überhaupt nicht gehorsam und kommunizieren nicht gut miteinander. Sie sind so weit oben, aber die Front-End-Studenten leiden darunter.)
Die Lösung ist jedoch immer noch leicht zu finden. Verwenden Sie ein Element, um die Eingabe zu umschließen, fügen Sie dem Element weitere erforderliche Elemente hinzu und legen Sie den Stil fest, um den gewünschten Effekt zu erzielen. Setzen Sie den Positionswert des Eingabeelements auf absolut, um die äußeren Elemente zu füllen, und machen Sie die Eingabe dann transparent.
Der HTML-Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<div id="Eingabedatei">
<span id="text">Zum Hochladen klicken</span>
<input id="Datei" Typ="Datei" />
</div>

Der entsprechende CSS-Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

#Eingabedatei {
position: relative; /* Positionierung der untergeordneten Elemente sicherstellen*/
Breite: 120px;
Höhe: 30px;
Hintergrund: #eee;
Rand: 1px durchgezogen #ccc;
Textausrichtung: zentriert;
Cursor: Zeiger;
}
#text {
Anzeige: Inline-Block;
Rand oben: 5px;
Farbe: #666;
Schriftfamilie: „黑体“;
Schriftgröße: 18px;
}
#Datei {
Anzeige: Block;
Position: absolut;
oben: 0;
links: 0;
Breite: 120px; /* Die Breite und Höhe sollten mit den umgebenden Elementen übereinstimmen*/
Höhe: 30px;
Deckkraft: 0;
-moz-opacity: 0; /* Kompatibel mit älteren Browsern */
Filter: Alpha (Deckkraft = 0); /* IE-kompatibel */
}

Der Anzeigeeffekt ist wie unten dargestellt:

......
Allerdings gibt es hier noch einen Bug. Wenn man so einen Button macht, sollte dieser klickbar sein, wenn man mit der Maus darüber fährt. Aber selbst wenn man allen Elementen das Attribut cursor:pointer; hinzufügt, werden manche Bereiche trotzdem als Zeiger angezeigt. Gibt es hier einen Experten, der dieses Problem lösen kann?

<<:  Detaillierte Erklärung der Wertübertragung zwischen übergeordneten und untergeordneten Komponenten in Vue3

>>:  So verwenden Sie rsync unter Linux

Artikel empfehlen

Wie implementiert Vue die Kommunikation zwischen Komponenten?

Inhaltsverzeichnis 1. Kommunikation zwischen Vate...

Vollständiger Schrittbericht der TabBar-Komponente der Vue-Kapselung

Inhaltsverzeichnis Umsetzungsideen: Schritt 1: Ko...

So verwenden Sie CSS-Medienabfragen mit einem geringeren Seitenverhältnis

CSS-Medienabfragen haben ein sehr praktisches Sei...

JavaScript-Canvas zum Erstellen eines Rubbellos-Beispiels

In diesem Artikel wird der spezifische Code von J...

Beispielanalyse für MySQL Oracle- und SQL Server-Paging-Abfragen

Ich habe vor Kurzem eine einfache Studie zur Date...

Lösung für das Problem, dass MySQL Daten sehr langsam löscht und einfügt

Wenn ein Unternehmensentwickler eine Insert-Anwei...

JavaScript erklärt die Kapselung und Verwendung von Zeitlupenanimationen

Durchführung von Prozessanalysen (1) Wie rufe ich...

Eine kurze Erläuterung der Manifestation und Wertauswahlmethode von innodb_autoinc_lock_mode

Voraussetzung: Percona 5.6 Version, Transaktionsi...

Verwendung und Unterschied von Vue.set() und this.$set()

Wenn wir Vue zur Entwicklung verwenden, kann eine...

Lösung für den MySQL-Fehlercode 1064

Wenn die Wörter in der SQL-Anweisung mit den Schl...

CSS zum Erzielen von Text auf dem Hintergrundbild

Wirkung: <div Klasse="imgs"> <...

Grundlegende Verwendung von Unterabfragen in MySQL

Inhaltsverzeichnis 1. Unterabfragedefinition 2. U...

So verwenden Sie Dayjs zum Berechnen gängiger Daten in Vue

Bei der Verwendung von Vue zur Entwicklung von Pr...

Lösen Sie das Problem der Kombination von AND und OR in MySQL

Wie unten dargestellt: Wählen Sie Produktname, Pr...

Detaillierte Erklärung des MySQL-Überwachungstools mysql-monitor

1. Übersicht mysql-monitor MySQL-Überwachungstool...