Heim Web-Frontend HTML-Tutorial Methode zum Definieren der Eingabetyp=Dateistil_HTML/Xhtml_Webseitenproduktion

Methode zum Definieren der Eingabetyp=Dateistil_HTML/Xhtml_Webseitenproduktion

May 16, 2016 pm 04:41 PM
file 样式

Warum die Dateikontrolle verschönern? Stellen Sie sich vor, die anderen Kinder sind alle ordentlich gekleidet und schön, aber zwei von ihnen schauen nicht auf Sie herab. Das ist so unharmonisch.

Die ursprüngliche Dateisteuerung sieht so aus:

Denken Sie nicht, dass dies aus einem Text und einer Schaltfläche besteht, es ist ein Steuerelement , der HTML-Code lautet:

Kopieren Sie den Code
Der Code lautet wie folgt:

>
In diesem Fall verwenden wir einen Text und eine Schaltfläche, um den Stil dieser Datei anzuzeigen. Der HTML-Code lautet wie folgt:



Code kopierenCode wie folgt:
='btn' value='Browse..' /> .getElementById('textfield').value= this.value" />

< ;/form>
div>


Die äußere Ebene von div soll eine Positionsreferenz für die Eingabe im Inneren bereitstellen, da sie beim Schreiben von Stilen relativ positioniert werden muss Das echte Dateisteuerelement deckt das simulierte ab und verbirgt dann das Dateisteuerelement (auch wenn das Dateisteuerelement nicht sichtbar ist). Der CSS-Code lautet also wie folgt:




Kopieren Sie den Code
Der Code lautet wie folgt: .file-box{ position:relative;width:340px} .txt{ height: 22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background- color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.file{ position :absolute; top:0; right:80px; filter:alpha(opacity:0 );opacity: 0;width:260px }




Rendering:

Endlich eine DEMO hinterlassen: Klicken Sie, um die Demo anzuzeigen
Methode zum Definieren der Eingabetyp=Dateistil_HTML/Xhtml_Webseitenproduktion
Definieren Sie den Stil der Eingabe type="file"

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Hongmeng native Anwendung zufälliger Poesie Hongmeng native Anwendung zufälliger Poesie Feb 19, 2024 pm 01:36 PM

Um mehr über Open Source zu erfahren, besuchen Sie bitte: 51CTO Hongmeng Developer Community https://ost.51cto.com Laufumgebung DAYU200:4.0.10.16SDK: 4.0.10.15IDE: 4.0.600 1. Um eine Anwendung zu erstellen, klicken Sie auf Datei- >newFile->CreateProgect. Vorlage auswählen: [OpenHarmony] EmptyAbility: Geben Sie den Projektnamen, shici, den Namen des Anwendungspakets com.nut.shici und den Speicherort der Anwendung XXX ein (kein Chinesisch, Sonderzeichen oder Leerzeichen). CompileSDK10, Modell: Stage. Gerät

macOS: So ändern Sie die Farbe von Desktop-Widgets macOS: So ändern Sie die Farbe von Desktop-Widgets Oct 07, 2023 am 08:17 AM

In macOS Sonoma müssen Widgets nicht wie in früheren Versionen von Apples macOS außerhalb des Bildschirms ausgeblendet oder im Benachrichtigungscenter vergessen werden. Stattdessen können sie direkt auf dem Desktop Ihres Mac platziert werden – sie sind auch interaktiv. Bei Nichtgebrauch verschwinden macOS-Desktop-Widgets in einem monochromen Stil im Hintergrund, wodurch Ablenkungen reduziert werden und Sie sich auf die aktuelle Aufgabe in der aktiven Anwendung oder im aktiven Fenster konzentrieren können. Wenn Sie jedoch auf den Desktop klicken, kehren sie zur Vollfarbe zurück. Wenn Sie ein tristes Aussehen bevorzugen und diesen Aspekt der Einheitlichkeit auf Ihrem Desktop beibehalten möchten, gibt es eine Möglichkeit, es dauerhaft zu machen. Die folgenden Schritte zeigen, wie es gemacht wird. Öffnen Sie die Systemeinstellungen-App

Verwenden Sie die Funktion File.length() von Java, um die Größe der Datei zu ermitteln Verwenden Sie die Funktion File.length() von Java, um die Größe der Datei zu ermitteln Jul 24, 2023 am 08:36 AM

Verwenden Sie die File.length()-Funktion von Java, um die Größe einer Datei zu ermitteln. Die Dateigröße ist eine sehr häufige Anforderung beim Umgang mit Dateioperationen. Java bietet eine sehr praktische Möglichkeit, die Größe einer Datei zu ermitteln, d. h. mithilfe der Länge(. )-Methode der File-Klasse. In diesem Artikel wird erläutert, wie Sie mit dieser Methode die Größe einer Datei ermitteln und entsprechende Codebeispiele angeben. Zuerst müssen wir ein File-Objekt erstellen, um die Datei darzustellen, deren Größe wir ermitteln möchten. So erstellen Sie ein File-Objekt: Filef

So konvertieren Sie einen PHP-Blob in eine Datei So konvertieren Sie einen PHP-Blob in eine Datei Mar 16, 2023 am 10:47 AM

So konvertieren Sie einen PHP-Blob in eine Datei: 1. Erstellen Sie eine PHP-Beispieldatei; 2. Über „function blobToFile(blob) {return new File([blob], 'screenshot.png', { type: 'image/jpeg' }) } ”-Methode kann zum Konvertieren von Blob in eine Datei verwendet werden.

Benennen Sie Dateien mit der Java-Funktion File.renameTo() um Benennen Sie Dateien mit der Java-Funktion File.renameTo() um Jul 25, 2023 pm 03:45 PM

Verwenden Sie die Funktion File.renameTo() von Java, um Dateien umzubenennen. In der Java-Programmierung müssen wir häufig Dateien umbenennen. Java stellt die File-Klasse für die Verarbeitung von Dateioperationen bereit, und die Funktion renameTo() kann Dateien problemlos umbenennen. In diesem Artikel wird die Verwendung der Java-Funktion File.renameTo() zum Umbenennen von Dateien vorgestellt und entsprechende Codebeispiele bereitgestellt. Die Funktion File.renameTo() ist eine Methode der File-Klasse.

Verwenden Sie die Funktion File.getParentFile() von Java, um das übergeordnete Verzeichnis der Datei abzurufen Verwenden Sie die Funktion File.getParentFile() von Java, um das übergeordnete Verzeichnis der Datei abzurufen Jul 27, 2023 am 11:45 AM

Verwenden Sie die Funktion File.getParentFile() von Java, um das übergeordnete Verzeichnis einer Datei abzurufen. In der Java-Programmierung müssen wir häufig Dateien und Ordner bedienen. Wenn wir das übergeordnete Verzeichnis einer Datei abrufen müssen, können wir die von Java bereitgestellte Funktion File.getParentFile() verwenden. In diesem Artikel wird die Verwendung dieser Funktion erläutert und Codebeispiele bereitgestellt. Die Dateiklasse in Java ist die Hauptklasse zum Betreiben von Dateien und Ordnern. Es bietet viele Methoden zum Abrufen und Bearbeiten von Dateieigenschaften

Leitfaden zum Beheben von Fehlausrichtungen von WordPress-Webseiten Leitfaden zum Beheben von Fehlausrichtungen von WordPress-Webseiten Mar 05, 2024 pm 01:12 PM

Leitfaden zum Beheben falsch ausgerichteter WordPress-Webseiten. Bei der Entwicklung von WordPress-Websites stoßen wir manchmal auf falsch ausgerichtete Webseitenelemente. Dies kann an Bildschirmgrößen auf verschiedenen Geräten, Browserkompatibilität oder falschen CSS-Stileinstellungen liegen. Um diese Fehlausrichtung zu beheben, müssen wir das Problem sorgfältig analysieren, mögliche Ursachen finden und es Schritt für Schritt debuggen und reparieren. In diesem Artikel werden einige häufig auftretende Probleme mit der Fehlausrichtung von WordPress-Webseiten sowie entsprechende Lösungen vorgestellt und spezifische Codebeispiele bereitgestellt, die bei der Entwicklung helfen

CSS-Webhintergrundbilddesign: Erstellen Sie verschiedene Hintergrundbildstile und -effekte CSS-Webhintergrundbilddesign: Erstellen Sie verschiedene Hintergrundbildstile und -effekte Nov 18, 2023 am 08:38 AM

CSS-Webseiten-Hintergrundbilddesign: Erstellen Sie verschiedene Hintergrundbildstile und -effekte. Es sind spezifische Codebeispiele erforderlich. Zusammenfassung: Im Webdesign sind Hintergrundbilder ein wichtiges visuelles Element, das die Attraktivität und Lesbarkeit der Seite effektiv verbessern kann. In diesem Artikel werden einige gängige Designstile und -effekte für CSS-Hintergrundbilder vorgestellt und entsprechende Codebeispiele bereitgestellt. Leser können diese Hintergrundbildstile und -effekte entsprechend ihren eigenen Bedürfnissen und Vorlieben auswählen und anwenden, um bessere visuelle Effekte und ein besseres Benutzererlebnis zu erzielen. Schlüsselwörter: CSS, Hintergrundbild, Designstil, Effekt, Codedarstellung

See all articles