So erstellen Sie eine Suchleiste in HTML

Verschiedene Komponenten bilden die Webseiten der Anwendung, wie z. B. Lader, Navigationsleisten, Suchleisten und mehr. Die CSS -Eigenschaften werden verwendet, um diese Komponenten zu stylen. Insbesondere ist die Komponente, die für jede Anwendung fast obligatorisch ist, die “Suchleiste”. Suchleisten werden verwendet, um den Benutzern eine bessere Zugänglichkeit zu bieten, so dass Benutzer nach Komponenten suchen, anstatt die gesamte Website zu durchsuchen.

In diesem Beitrag führen Sie sich an:

• Was ist eine Suchleiste?
• So erstellen Sie Suchleiste in HTML?
• So fügen Sie der Suchleisten -Taste Übergangseigenschaft hinzu?

Was ist eine Suchleiste?

Die Suchleiste ist ein grafisches Steuerelement jeder Anwendung. Es besteht hauptsächlich aus einem einzeiligen Textfeld und einer Schaltfläche. Es funktioniert so, dass der Benutzer die Informationen im Eingabebuch für die Suche eingibt, und drückt dann die Taste, um die Ergebnisse zu erhalten.

So erstellen Sie Suchleiste in HTML?

Fügen Sie zunächst ein Div -Element mit der Klasse hinzuSuchmain“. Fügen Sie mit dem Klassennamen ein weiteres Div -Tag hinzu "SuchleisteIn diesem Div. Platzieren Sie dann ein Eingabetikett und ein Schaltflächen -Tag darin. Das Eingabetag ist den Attributen zugeordnet “Typ"Mit einem Wert als"Text", und ein "Platzhalter”Wird verwendet, um einen Text in einem Eingabefeld anzuzeigen.

Hier ist der HTML -Code:

Suchen

CSS

In CSS werden verschiedene Eigenschaften verwendet, um die Suchleiste zu stylen. Lassen Sie uns sie nacheinander besprechen!

Stil alle Arten von Elementen

*
Rand: 0;
Polsterung: 0;
Kastengrößen: Border-Box;
Schriftfamilie: Verdana, Genf, Tahoma, Sans-Serif;

Das Sternchen "*" -Symbol wird verwendet, um alle Elementarten darzustellen. Wenn es von Element-, Klasse- oder ID -Namen folgt, wird der gesamte angegebene Name im gesamten Dokument dargestellt.

• “RandEigenschaft mit Wert 0 bietet keinen Platz um ein Element um.
• “Polsterung”Mit Wert 0 definiert kein Platz um den Inhalt, der Inhalt zugewiesen wird.
• “Kastengrößen”Mit Value Border-Box enthält die Polsterung und den Rand zur Gesamthöhe und der Breite des Elements.
• “Schriftfamilie”Wird verwendet, um die Schrift aller Elemente auszuwählen.

Stil „Körper“ Element

Körper
Hintergrundfarbe: Darkslategrey;

Die Hintergrundfarbe des gesamten Körperabschnitts ist auf “gesetzt“DarkSlategrey" Farbe.

Stil „Suchmain“ div

.Suchmain
Hintergrundfarbe: RGBA (0, 0, 0, 0, 0.159);
Max-Breite: 700px;
Rand: 150px Auto;
Höhe: 400px;
Grenzradius: 30px;

Das Element mit Klassenattributsuche-Main enthält nachstehend unterschiedliche Eigenschaften:

• “maximale Breite”Gibt die maximale Breitgrenze an.
• “Höhe”Gibt die Gesamthöhe des DIV auf 400px an.
• “Grenzradius”Bietet einen Radius von 30px um das Divelelement.
• Der "Hintergrundfarbe" Und "RandEigenschaften funktionieren wie oben erläutert.

Stil „Suchbar“ Div

.Suchleiste
Anzeige: Flex;
Justify-Content: Center;
Ausrichtung: Zentrum;
Höhe: 100%;

Die Suchstar-DIV wird mit den CSS-Eigenschaften gestaltet, die unten diskutiert werden:

• “AnzeigeProperty Flex wird verwendet, um das reaktionsschnelle flexible Layout der Div zu machen.
• “Rechtfertigungsbekämpfung”Richtet die flexiblen Gegenstände des Diven horizontal aus.
• “Ausrichtung”Legt die Ausrichtung der flexiblen Gegenstände vertikal fest.
• “Höhe”Eigentum funktioniert wie oben erläutert.

Stil „Eingabe“ Element

.Suchbareingabe
Grenze: 1PX Solid RGB (47, 63, 63);
Polsterung: 20px 30px;
Schriftgröße: 24px;
Hintergrundfarbe: RGB (85, 104, 104);
Farbe: #ffffff;
Umriss: Keine;

Das Eingangsfeld des Suchleisten -DIV erhält Eigenschaften, die unten erklärt werden:

• “GrenzeDie Eigenschaft legt den Rand um das Eingabefeld mit Breite, Linienstil und Farbe um.
• “SchriftgrößeEigenschaft gibt die Schriftgröße des Textes an.
• “Farbe”Definiert die Farbe des Textfeldfelds des Eingabefeldes.
• “UmrissEigenschaft mit Wert 0 setzt keine Zeile um den Rand des Elements, hauptsächlich beim Klicken.
• Der "Polsterung" Und "Hintergrundfarbe”Eigenschaften werden wie oben angegeben erfolgen.

Style -Platzhalter

.Suchbar Input :: Placeholder
Farbe: #dadada;

Das Platzhalterattribut des Eingangsfelds der Suchleisten -DIV ist mit dem “zugewiesenFarbe”Eigentum #dadada. Es wird Farbe auf den Text des Platzhalters anwenden.

Stilknopf

.Suchbar-Schaltfläche
Grenze: 1PX Solid RGB (47, 63, 63);
Polsterung: 20px 30px;
Schriftgröße: 22px;
Hintergrundfarbe: RGB (12, 33, 33);
Farbe: #a3a3a3;
Cursor: Zeiger;
Rand-Links: 10px;

Die Eigenschaften des Schaltflächenelements der Suchleiste werden unten erläutert:

• “MauszeigerEigenschaft gibt den Cursorstil der Maus an, wenn er auf die Taste zeigt.
• “links”Fügt links vom Knopf etwas Platz hinzu.
• Alle anderen Eigenschaften funktionieren gleich.

Durch die Ausführung des oben genannten Code erhalten wir das Ergebnis, wie im folgenden Bild gezeigt:

Wie wir wissen, machen Übergangs- und Animationseigenschaften auf Elementen sie interaktiver und unterhaltsamer. Im nächsten Abschnitt beschreibt also das Hinzufügen eines Übergangs auf der Suchschaltfläche.

So fügen Sie der Suchleisten -Taste Übergangseigenschaft hinzu?

Fügen Sie die Übergangseigenschaft mit dem Wert hinzu, der als "festgelegt wurde"alle 0.3s Leichte" zum ".Suchbartast”, Wo alle alle Eigenschaften angeben, 0.3S zeigt die Dauer des Übergangs an, und die Leichtigkeit bedeutet einen langsamen Start, dann schnell und endet langsam:

Übergang: alle 0.3s Leichtigkeit;

Um nun den Übergang auf der Schaltfläche auf dem Schweber durchzuführen.

Style -Taste am Schwebe

.Suchbar-Schaltfläche: Hover
Transformation: Translatey (-5px);

Das Knopfelement wird durch Verwendung der Eigenschaftstransformation mit dem Wert gestaltetTranslatey (-5px)”Das bedeutet, dass sich die Taste für die Mausbeschaltung in einer vertikalen Position bewegt.

Der hinzugefügte Effekt ist im folgenden Bild zu sehen:

Das ist großartig! Eine interaktive Suchleiste wird in HTML mit CSS erfolgreich erstellt.

Abschluss

In HTML besteht eine Suchleiste hauptsächlich aus einem Eingabefeld und einer Taste, die und Elemente verwendet. Die Webkomponenten können als interaktiv bezeichnet werden, indem Animations- und Übergangseigenschaften bereitgestellt werden, wie erwähnt. In diesem Blog wurde erklärt, wie man eine Suchleiste in HTML mit einem gründlichen Beispiel erstellt.