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
So fügen Sie ein Lua-Modul zu Nginx hinzu
Lua installieren wget http://luajit.org/download/...
CSS-Implementierungscode für die Textausrichtung
Beim Erstellen von Formularen kommt es häufig vor...
Detailliertes Tutorial zur Installation der MySQL v5.7.18-Dekomprimierungsversion
Laden Sie MySQL herunter https://dev.mysql.com/do...
Eine detaillierte Zusammenfassung der Regeln zur Verschachtelung von HTML-Tags, geeignet für Anfänger
Ich habe vor kurzem HTML neu gelernt, was als neue...
js realisiert den Effekt des Tanabata-Geständnisfeuers, jQuery realisiert die Feuerfeuertechnologie
In diesem Artikel wird die Verwendung von js- und...
Windows Server 2016 – Kurzanleitung zur Bereitstellung von Remotedesktopdiensten
Jetzt unterstützt der 2016-Server den Multi-Site-...
Optimierung der MySQL 4G-Speicherserverkonfiguration
Da die Anzahl der Besuche auf der Website des Unt...
Vite2.0 Fallstricke
Inhaltsverzeichnis Optimierung des Vite-Projektau...
Springboot+VUE zur Realisierung von Anmeldung und Registrierung
In diesem Artikelbeispiel wird der spezifische Co...
MySQL-Datumsfunktionen und Datumskonvertierungs- und -formatierungsfunktionen
MySQL ist eine kostenlose relationale Datenbank m...
Wir treiben IE6 alleine in den Untergang
Tatsächlich fragen wir uns jeden Tag, wann IE6 wi...
Analyse der Verwendung der Funktion zur sofortigen Ausführung in JavaScript
Wir wissen, dass eine Funktion im Allgemeinen auf...
CSS3-Eigenschaft line-clamp steuert die Verwendung von Textzeilen
Beschreibung: Begrenzen Sie die Anzahl der Textze...
Ubuntu16.04 erstellt eine php5.6-Webserverumgebung
Ubuntu 16.04 installiert standardmäßig die PHP7.0...
Detaillierte Einführungshinweise zu Vue
Inhaltsverzeichnis 1. Einleitung 2. Erster Eindru...