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
Einige Indikatoren für exzellentes Web-Frontend-Design
Die Barrierefreiheit von Webseiten scheint etwas z...
Lösung für das domänenübergreifende Problem der SpringBoot- und Vue-Interaktion
Inhaltsverzeichnis Same Origin-Richtlinie für Bro...
Detaillierter Installationsprozess von MySQL5.6.40 unter CentOS7 64
MySQL5.6.40-Installationsprozess unter CentOS7 64...
Ubuntu startet den Remote-Anmeldevorgang des SSH-Dienstes
SSH-Secure-Shell, ermöglicht sichere Remote-Anmel...
Detaillierte Erklärung, wie Sie das automatische Beenden des Docker-Containers verhindern können
Dieser Artikel stellt kurz die Beziehung zwischen...
Vue verwendet GraphVis, um einen unendlich erweiterten Beziehungsgraphen zu entwickeln
1. Gehen Sie zur offiziellen GraphVis-Website, um...
Detaillierte Erklärung zur Installation der PHP-Curl-Erweiterung unter Linux
Dieser Artikel beschreibt, wie man die PHP-Curl-E...
Lösung für den Konflikt zwischen Nginx und Backend-Port
Frage: Bei der Entwicklung des Alice-Verwaltungss...
So verwenden Sie die Vue-Timeline-Komponente
In diesem Artikelbeispiel wird der spezifische Im...
So richten Sie die Verwendung der chinesischen Eingabemethode in Ubuntu 18.04 ein
In der neuesten Version von Ubuntu müssen Benutze...
Detaillierte Erklärung zur Installation von PHP7 unter Linux
Wie installiere ich PHP7 unter Linux? 1. Installi...
HTML setzt Fett-, Kursiv-, Unterstrichen-, Durchstreich- und andere Schrifteffekte
<p><b>Dies ist eine fette Schriftart&l...
Einführung in die Linux-Dateikomprimierung und -Verpackung
1. Einführung in Komprimierung und Verpackung All...
Beispielcode zur Implementierung der Großbildanpassung auf dem PC mit vue+px2rem (REM-Anpassung)
Konfiguration Vorwort Projektaufbau: basierend au...
Nginx Reverse Proxy Springboot JAR-Paket-Prozessanalyse
Die übliche Methode zum Bereitstellen eines Sprin...