Implementierung einer Suchfeldfunktion mit Suchsymbol basierend auf HTML-CSS
|
Vorwort Ich möchte Ihnen zeigen, wie Sie ein Suchfeld mit kleinen Symbolen erstellen, das im Frontend sehr nützlich ist. Effektanzeige Grundgedanke 1. Verwenden Sie die absolute Positionierung, um das Suchbild über dem Suchfeld zu platzieren 2. Stellen Sie den Texteinzug des Eingabefeldes auf die Größe des Suchbildes zuzüglich der Ränder links und rechts des Bildes ein Vorbereiten Nur ein Suchsymbolbild, ähnlich dem unten
Code
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Suchfeld-Demo</title>
<style type="text/css">
*{
Rand: 0;
Polsterung: 0;
}
Körper{
Breite: 100vw;
Höhe: 100vh;
Hintergrund: radialer Farbverlauf (in der Mitte,
#3498db,#2980b9);
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
}
div.suche{
Höhe: 40px;
Breite: 500px;
}
div.Suchformular{
Breite: 100 %;
Höhe: 100%;
}
div.Suchformular Eingabe:nth-child(2){
Breite: 400px;
Höhe: 100%;
Schriftgröße: 16px;
Texteinzug: 40px;
Rand: keiner;
schweben: links;
}
div.Suchformular Eingabe:nth-child(3){
Breite: 100px;
Höhe: 100%;
Schriftgröße: 16px;
Buchstabenabstand: 5px;
Rand: keiner;
}
div.Suchformular img{
Position: absolut;
links: 50vw;
transformieren: übersetzenX(-250px);
Rand oben: 10px;
Rand links: 10px;
Höhe: 20px;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Suche">
<form action="#" method="post">
<img src="./search_ico.png" alt="">
<input type="text" name="condition" placeholder="Bitte geben Sie die Suchbedingung ein">
<input type="submit" value="Suchen">
</form>
</div>
</body>
</html>Zusammenfassen Oben sehen Sie die vom Editor eingeführte Suchfeldfunktion mit Suchsymbol basierend auf HTML CSS. Ich hoffe, sie ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: Mehrere Navigationsrichtungen, die in Zukunft beliebt sein werden
>>: Methode zur Optimierung von MySQL-Gruppenabfragen
Artikel empfehlen
Informationen zur Auswahl des Uhrzeit-, Datums- und Zeichenfolgentyps in MySQL
Inhaltsverzeichnis 1. Verwendung von DATETIME und...
Wann verwendet man Tabellen und wann CSS (Erfahrungsaustausch)
Die Haupttextseite von TW hatte früher eine Breite...
Fallstricke bei der Installation des komprimierten MySQL 8.0.18-Pakets und beim Zurücksetzen vergessener Passwörter
http://www.cppcns.com/shujuku/mysql/283231.html S...
Virtuelle Maschine klonen Linux Centos6.5 System Netzwerkkarte Konfiguration Grafik-Tutorial
Als Neuling, der gerade mit dem Linux-System in K...
MySQL NULL-Datenkonvertierungsmethode (unbedingt lesen)
Wenn Sie MySQL zum Abfragen der Datenbank verwend...
Beispiele für die Verwendung von ungeordneten Listen-Tags und geordneten Listen-Tags im HTML-Format
1. Obere und untere Listen-Tags: <dl>..<...
So legen Sie MySQL-Fremdschlüssel für Anfänger fest
Inhaltsverzeichnis Die Rolle von Fremdschlüsseln ...
Installationstutorial für MySQL 5.7 unter CentOS 7
1. Laden Sie das offizielle MySQL Yum Repository ...
Der eigentliche Prozess der Implementierung des Zahlenrätsels im WeChat-Applet
Inhaltsverzeichnis Funktionseinführung Rendern 1....
Was bedeuten CN2, GIA, CIA, BGP und IPLC?
Was ist die CN2-Linie? CN2 steht für China Teleco...
So verwenden Sie das Realip-Modul im Nginx-Grundlagenlernen
Vorwort Es gibt zwei Arten von Nginx-Modulen: off...
Javascript implementiert die Webversion des Flipperspiels
Das mit JavaScript-Objekten und -Methoden impleme...
Benutzerdefiniertes JavaScript-Plug-In zum Implementieren der Tab-Umschaltfunktion
In diesem Artikel wird der spezifische JavaScript...
JS removeAttribute()-Methode zum Löschen eines Attributs eines Elements
Verwenden Sie in JavaScript die Methode removeAtt...
MySQL führt SQL-Datei aus und meldet Fehler Fehler: Unbekannte Speicher-Engine „InnoDB“-Lösung
Finden Sie das Problem Ich hatte kürzlich ein Pro...