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
WeChat-Applet implementiert SMS-Login in Aktion
Inhaltsverzeichnis 1. Vorschau der Schnittstellen...
CSS verwendet das Autoflow-Attribut, um einen Sitzauswahleffekt zu erzielen
1. Autoflow-Attribut: Wenn die Länge und Breite d...
Web-Frontend-Entwicklung CSS-bezogene Teamzusammenarbeit
Die Frontend-Entwicklungsabteilung wächst, die Mi...
Erläuterung der Vorsichtsmaßnahmen für die Mysql-Master-Slave-Replikation
1. Fehler beim Verbinden mit Master 'x@xxxx:x...
Tutorial zum Migrieren von Projekten von MYSQL zu MARIADB
Bereiten Sie die Datenbank (MySQL) vor. Wenn Sie ...
Centos7.4-Serverinstallation von Apache und Lösungen für während des Installationsvorgangs aufgetretene Probleme
Dieser Artikel beschreibt, wie Sie Apache auf ein...
Detaillierte Analyse der Kompilierung und Installation von vsFTP 3.0.3
Details zur Sicherheitsanfälligkeit VSFTP ist ein...
Erläuterung der neuen Funktion von Hadoop 2.X, der Papierkorbfunktion
Durch Aktivieren der Papierkorbfunktion können Si...
Detaillierter Installationsprozess des NodeJS-Verwaltungstools NVM
keine Ahnung nvm ist für die Verwaltung mehrerer ...
Lösung für die Eingabeaufforderung „Keine solche Datei oder kein solches Verzeichnis“ beim Ausführen ausführbarer Dateien unter Linux
Als ich kürzlich das Linux-Betriebssystem zum Aus...
Analyse und Lösung des a.getAttribute(href,2)-Problems in IE6/7
Kurzbeschreibung <br />In IE6 und 7 wird in...
Docker-Dateispeicherpfad, Port-Mapping-Betriebsmodus ändern
So erhalten Sie den Container-Startbefehl Der Con...
Detaillierte Erklärung der Ursachen und Lösungen von Konflikten zwischen Filtern und festen
Problembeschreibung Wenn filter im body verwendet...
Lösung für das domänenübergreifende Problem der SpringBoot- und Vue-Interaktion
Inhaltsverzeichnis Same Origin-Richtlinie für Bro...
18 Web-Usability-Prinzipien, die Sie kennen müssen
Sie können über die besten visuellen Designfähigk...