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
Der Implementierungsprozess des langen Drückens zum Identifizieren des QR-Codes im WeChat-Applet
Vorwort Wir alle wissen, dass man QR-Codes in off...
MySQL lösen: FEHLER 1045 (28000): Zugriff verweigert für Benutzer ‚root‘@‚localhost‘ (mit Passwort: NEIN/JA)
1. Problem Manchmal, wenn wir uns bei Mysql anmel...
js zur Realisierung eines einfachen Puzzlespiels
In diesem Artikel wird der spezifische Code von j...
Einfaches Anwendungsbeispiel für rekursive MySQL 8.0-Abfragen
Vorwort Dieser Artikel verwendet die neuen Funkti...
JS-Operationsobjekt-Array zum Erreichen von Beispielcode zum Hinzufügen, Löschen, Ändern und Abfragen
1. Einleitung Kürzlich habe ich einem Freund geho...
Beispiel für die Wertübertragung in einem HTML-Formular über die Get-Methode
Die google.html-Schnittstelle ist wie in der Abbil...
Detaillierte Erklärung der Schlüsselwörter und reservierten Wörter in MySQL 5.7
Vorwort Die Schlüsselwörter von MySQL und Oracle ...
Analyse der Verwendung und des Prinzips der Docker Swarm-Clusterverwaltung
Schwarmclusterverwaltung Einführung Docker Swarm ...
Docker verwendet Supervisor zur Verwaltung von Prozessvorgängen
Ein Docker-Container startet beim Start beispiels...
So verwenden Sie Nginx zum Proxy mehrerer Anwendungssites in Docker
Vorwort Was ist die Rolle eines Agenten? - Mehrer...
So analysieren Sie die Leistung von MySQL-Abfragen
Inhaltsverzeichnis Grundlagen langsamer Abfragen:...
Lösung für den ineffektiven Rand von in HTML verschachtelten Divs
Hier ist eine Lösung für das Problem, dass der Ra...
Verwenden von react-virtualized zum Implementieren einer langen Liste von Bildern mit dynamischer Höhe
Inhaltsverzeichnis Während der Entwicklung aufget...
Gängige Methoden und Probleme der Docker-Bereinigung
Wenn Sie Docker für die Entwicklung im großen Maß...
HTML verwendet Laufschrift, um Text nach links und rechts scrollen zu lassen
Code kopieren Der Code lautet wie folgt: <KÖRP...