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

Fünf Dinge, die ein guter User Experience Designer gut machen sollte (Bild und Text)

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

Fünf Dinge, die ein guter User Experience Designer gut machen sollte (Bild und Text)

Führen Sie die Schritte für die Trennung von Nginx-Proxy-Frontend und Backend mit demselben Domänennamen aus.

Detaillierte Erläuterung mehrerer Beispiele für Insert- und Batch-Anweisungen in MySQL

Es gibt kein Problem mit dem Linux-Dateipfad beim Bereitstellen der Fenster- und Linux-Projekte

Beispielanalyse von MySQL-Start- und Verbindungsmethoden

So stellen Sie eine Datenbank und eine Tabelle aus einer vollständigen MySQL-Datenbanksicherung wieder her

Lösung für das Problem mit sicheren Dateiprivilegien beim Exportieren von MySQL-Daten

js, um die vollständigen Schritte der Konvertierung von Chinesisch nach Pinyin durchzuführen

Adaptive HTML-Tabellenmethode

So fügen Sie ein Lua-Modul zu Nginx hinzu

Artikel empfehlen

WeChat Mini-Programm-Benutzerautorisierung zum Abrufen einer Mobiltelefonnummer (getPhoneNumber)

Zusammenfassung wissenschaftlicher Grundlagen und Anregungen für Webdesign und -produktion

Grundprinzipien für die Zusammenstellung einer Website-Homepage

MySQL 8.0.16 Installations- und Konfigurations-Tutorial unter Windows 10

Sammlung von 25 Schriftarten, die in berühmten Website-Logos verwendet werden

So überwachen Sie MySQL mit Zabbix

Vue implementiert ein einfaches Einkaufswagenbeispiel

Implementierung des HTML-Gleit- und Schwebeball-Menüeffekts

SQL-Implementierung von LeetCode (184. Das höchste Gehalt der Abteilung)

Erklärung zur Verwendung von JavaScript ECharts

Das WeChat-Applet realisiert ein Verknüpfungsmenü

Analyse der Informationsarchitektur von Facebook

Die 10 klassischen Optimierungsfälle und -szenarien von MySQL

Implementierung einer kreisförmigen CSS-Aushöhlung (Gutschein-Hintergrundbild)

Detaillierte Erläuterung des Implementierungsprozesses und der Verwendung des Linux-Papierkorbmechanismus