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
30 hervorragende Beispiele für Farbabstimmung im Webdesign
Heute habe ich in diesem Artikel 30 hervorragende ...
So benennen Sie die Tabelle in MySQL um und worauf Sie achten müssen
Inhaltsverzeichnis 1. Tabellenmethode umbenennen ...
Grafisches Tutorial zur Installation und Konfiguration von VMware Tools für Ubuntu 16.04 64-Bit
In diesem Artikel finden Sie ein grafisches Tutor...
Teilen Sie 13 grundlegende Syntax von Typescript
Inhaltsverzeichnis 1. Was ist Ts 2. Grundlegende ...
Implementieren Sie dynamisches Management und Monitoring von Docker-Containern basierend auf Spring-Boot und Docker-Java [mit vollständigem Quellcode-Download]
Einführung in Docker Docker ist eine Open-Source-...
Zabbix überwacht die MySQL-Instanzmethode
1. Überwachungsplanung Bevor Sie ein Überwachungs...
Tutorial zur Installation von VMware, Nmap und Burpsuite
Inhaltsverzeichnis VMware BurpSuite 1. Virtuelles...
So schreiben Sie DROP TABLE in verschiedene Datenbanken
So schreiben Sie DROP TABLE in verschiedene Daten...
Heute werde ich einige seltene, aber nützliche JS-Techniken teilen
1. Zurück-Button Verwenden Sie history.back(), um...
Vue implementiert Chat-Schnittstelle
In diesem Artikelbeispiel wird der spezifische Co...
Tutorial zur HTML-Tabellenauszeichnung (28): Farbattribut für Zellrahmen BORDERCOLOR
Um die Tabelle zu verschönern, können Sie für die...
Verwenden Sie Javascript, um ein Sliding-Nav-Navigations-Plugin mit Gleitbalkeneffekt zu entwickeln
Inhaltsverzeichnis 1. Einleitung 2. Nutzung 3. En...
MySQL-Datenaggregation und -gruppierung
Wir müssen Daten häufig zusammenfassen, ohne sie ...
Detaillierte Erklärung des Befehls mkdir beim Linux-Lernen
Inhaltsverzeichnis Vorwort 1. Grundkenntnisse zu ...
JS implementiert die Append-Funktion von jQuery
Inhaltsverzeichnis Zeig mir den Code Testen Sie d...