Stylen einer Eingabetyp = Datei - HTML

In HTML wird jedes Element als ein bestimmtes Element auf der Webseite angezeigt, z. B. als Schaltfläche, Absatz, horizontale Linie und vieles mehr. Mit CSS können wir jedoch auch benutzerdefinierte Stile auf diese Elemente anwenden. Die Mehrheit der Browser verändert das Erscheinungsbild der Eingabeelemente mit JavaScript oder CSS nicht. Obwohl das direkte Styling eines Eingabeelements schwierig ist, ist das “Das Element hilft uns, die Eingänge zu stylen.

Die Lernergebnisse dieses Blogs sind:

• So fügen Sie ein Eingabedateitypelement in HTML hinzu?
• So stylen Sie eine Eingangstyp = "Datei" -Taste?

So fügen Sie ein Eingabedateitypelement in HTML hinzu?

Das HTML -Element mit dem “Typ”Attribut“Datei”Wird verwendet, um ein Eingabelement zu erstellen, das Dateien akzeptiert.

Lassen Sie uns überprüfen, dass es zuerst funktioniert.

In HTML eine hinzufügen "Element und verknüpfen die “Typ”Attribut als“Datei”Dazu:

Ausgang

So stylen Sie eine Eingangstyp = "Datei" -Taste?

Das Element mit “Typ = Datei”Kommt mit dem Standardstil. Im folgenden Beispiel die HTML “Element wird verwendet, um eine Eingabe "type = Datei" zu stylen.

Befolgen Sie in HTML die folgenden Schritte, um eine HTML -Seite zu erstellen:

• Füge hinzu ein "”Element zusammen mit dem“für”Attribut und zuweisen Sie ihm eine Klasse“Dateistil”. Der "fürDas Attribut wird verwendet, um auf die des Tags zuzugreifen "Ausweis”Attribut.
• Fügen Sie im Etikettelement die "hinzu"Tag, um das Bild einzubetten und das “

  Tag für den Absatz.

• Das Element "" wird mit den Attributen "SRC" und "Breite" hinzugefügt.
• Der "srcDas Attribut enthält die URL des Bildes.
• Der "BreiteDas Attribut bestimmt die Breite des Bildes:

Foto hochladen

Ausgang

Im nächsten Abschnitt werden die CSS -Eigenschaften, die wir verwenden werden, diskutiert.

Stil "Datei" ID

#Datei
Anzeige: Keine;

Um das ordentliche Eingabedateielement zu verbergen, das “Anzeige"Eigenschaft wird als" festgelegt "keiner”.

Ausgang

Labelklasse im Stil „Dateistil“
Verwenden Sie die “, um auf das Etikettelement zuzugreifen, die“.DateistilKlasse und wenden Sie den folgenden Code an:

.Dateistil
Schriftfamilie: 'Trebuchet MS';
Breite: 400px;
Bildschirmsperre;
Hintergrundfarbe: #F5F4F4;
Rand: Auto;
Cursor: Zeiger;
Text-Align: Mitte;
Polsterung: 20px;
Border-Radius: 15px;
Grenze: 2PX gestrichelt #CDC8C8;

Im oben genannten Code das “”Wird durch folgende CSS -Eigenschaften gestylt:

• “Schriftfamilie”Legt den Schriftstil fest.
• “Breite”Bestimmt die Breite des Elements des Elements.
• “AnzeigeDie Eigenschaft passt das Layout des Elements an. Der Wert "Block”Wird die volle Breite nehmen.
• “Hintergrundfarbe”Wendet die Farbe auf den Hintergrund des Elements des Elements an.
• “RandDie Eigenschaft passt den Raum um das Element an.
• “Mauszeiger"Definiert den Maus -Cursorstil als"ZeigerWenn Sie auf das Element zeigen.
• “Textausrichtung”Identifiziert die Textausrichtung des Elements.
• “Polsterung”Bestimmt den Raum um den Elementinhalt.
• “Grenzradius”Macht die Kanten des Elements rund.
• “Grenze”Passt den Rand des Elements an, indem Sie die Werte für die Breite, den Stil und die Farbe des Randes definieren.

Das folgende Bild zeigt die Ausgabe des oben genannten Codes an:

Style-Kurs im Stil der Dateistil auf dem Schwebe

.Dateistil: Hover
Hintergrundfarbe: RGB (228, 213, 213);

Der ":schwebenIst eine Pseudoklasse, die verwendet wird, um den Schwebeffekt auf das Element anzuwenden. In unserem Szenario wird die Hintergrundfarbe des Elements geändert, wenn der Maus -Cursor auf das Element zeigt.

Ausgang

Wir haben Ihnen beigebracht, wie Sie einen Eingangstyp stylen können = “Datei”Taste in HTML.

Abschluss

Die HTML "Element wird verwendet, um das Eingabeelement mit dem "zu stylenTyp = Datei" Taste. Das Etikett -Tag definiert die “für”Attribut, das zum Zugriff auf die“ verwendet wirdAusweis”Attribut des Eingabetags. Danach können die CSS-Eigenschaften wie Rand, Hintergrundfarbe, Cursor, Polsterung und vieles mehr verwendet werden, um die Schaltfläche "type = file" zu stylen. Dieser Blog führte sich mit dem Styling eines Eingangstyps = “Datei" Taste.