So definieren Sie Eingabetyp=Dateistil
|
Warum die Dateisteuerung verschönern? Stellen Sie sich vor, alle anderen Kinder sind hübsch und schön gekleidet, aber zwei von ihnen ignorieren Sie. Das ist so unpassend. Die ursprüngliche Dateisteuerung sieht folgendermaßen aus: Denken Sie nicht, dass dies aus einem Text und einer Schaltfläche besteht. Es ist ein Steuerelement . Der HTML-Code lautet: Code kopieren Der Code lautet wie folgt:<input type="Datei" name="Datei" /> In diesem Fall verwenden wir einen Text und eine Schaltfläche, um den Stil dieser Datei anzuzeigen. Der HTML-Code lautet wie folgt: Code kopieren Der Code lautet wie folgt:<div Klasse="Dateibox"> <Formularaktion="" Methode="posten" enctype="multipart/form-data"> <Eingabetyp='Text' Name='Textfeld' ID='Textfeld' Klasse='txt' /> <input type='button' class='btn' value='Durchsuchen...' /> <input Typ="Datei" Name="Dateifeld" Klasse="Datei" ID="Dateifeld" Größe="28" onchange="document.getElementById('Textfeld').value=this.value" /> <input type="submit" name="submit" class="btn" value="Hochladen" /> </form> </div> Das äußere Div soll eine Positionsreferenz für die Eingabe im Inneren bereitstellen, da beim Schreiben des Stils eine relative Positionierung erforderlich ist, damit das echte Dateisteuerelement das simulierte überdeckt und dann das Dateisteuerelement ausblendet (auch wenn das Dateisteuerelement unsichtbar ist). Daher lautet der CSS-Code wie folgt: Code kopieren Der Code lautet wie folgt:.file-box{ position:relative;width:340px} .txt{ Höhe:22px; Rahmen:1px durchgezogen #cdcdcd; Breite:180px;} .btn{ Hintergrundfarbe: #FFF; Rahmen: 1px durchgezogen #CDCDCD; Höhe: 24px; Breite: 70px;} .file{ Position:absolut; oben:0; rechts:80px; Höhe:24px; Filter:Alpha(Deckkraft:0);Deckkraft: 0;Breite:260px } Effektbild: Tipp: Sie können einen Teil des Codes vor dem Ausführen ändern |
<<: Interpretieren von MySQL-Client- und Serverprotokollen
>>: Verwenden von CSS zur Implementierung von Bildrahmenanimationen und Kurvenbewegungen
Artikel empfehlen
Detaillierte Erläuterung der Kommunikation zwischen Angular-Eltern- und -Kindkomponenten
Inhaltsverzeichnis Überblick 1. Übersicht über Ei...
So aktualisieren Sie die Ansicht synchron nach Datenänderungen in Vue
Vorwort Vor kurzem bin ich auf ein interessantes ...
So stellen Sie ein Angular-Projekt mit Docker bereit
Es gibt zwei Möglichkeiten, Angular-Projekte mit ...
Fünf Möglichkeiten zum Durchlaufen von Objekten in JavaScript Beispielcode
Inhaltsverzeichnis Vorbereiten Fünf Waffen für … ...
Zusammenfassung der Lastausgleichsmethoden von Nginx
Um den Lastenausgleich zu verstehen, müssen Sie s...
Tutorial zum Upgrade, zur Installation und Konfiguration des Supervisors auf Centos 6.5
Vorstellung des Vorgesetzten Supervisor ist ein i...
Vue-Anfängerhandbuch: Erstellen des ersten Vue-cli-Scaffolding-Programms
1. Vue – Das erste Vue-CLI-Programm Die Entwicklu...
So verwenden Sie VirtualBox zum Simulieren eines Linux-Clusters
1. Richten Sie HOST auf dem Host-Macbook ein Im v...
Detaillierte Erklärung der Firewall-Regeleinstellungen und Befehle (Whitelist-Einstellungen)
1. Firewall-Regeln festlegen Beispiel 1: Port 808...
Eine kurze Diskussion über die häufig verwendeten APIs der VUE uni-app
Inhaltsverzeichnis 1. Routing und Seitensprung 2....
So verwenden Sie Docker zum Bereitstellen eines Django-Technologie-Stack-Projekts
Mit der Popularität und Reife von Docker ist es a...
Grundlegende Fähigkeiten zum Entwerfen von Web-Frontend-Schnittstellen
[Erforderlich] Benutzeroberfläche PhotoShop/Feuer...
Beispiel für die Methode „Mysql implementiert Nullwerte zuerst/letzten“
Vorwort Wir wissen bereits, dass MySQL den SQL-Be...
So ändern Sie die Tomcat-Portnummer in Linux
Ich habe hier mehrere Tomcats. Wenn ich sie gleic...
WeChat-Applet-Entwicklung Formularvalidierung WxValidate-Nutzung
Ich persönlich bin der Meinung, dass das Entwickl...