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

Bildbeschreibung hier einfügen

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

Bildbeschreibung hier einfügen

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!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!

<<: Mehrere Navigationsrichtungen, die in Zukunft beliebt sein werden

>>: Methode zur Optimierung von MySQL-Gruppenabfragen

Detaillierte Analyse der Kompilierung und Installation von vsFTP 3.0.3

Implementierung einer Suchfeldfunktion mit Suchsymbol basierend auf HTML-CSS

Detaillierte Analyse der Kompilierung und Installation von vsFTP 3.0.3

So implementieren Sie eine Array-Lazy-Evaluation-Bibliothek in JavaScript

HTML 5 Vorschau

So erstellen Sie Ihre eigene Angular-Komponentenbibliothek mit DevUI

Lösung für Djangos Unfähigkeit, mit dem uwsgi+nginx-Proxy auf statische Ressourcen zuzugreifen

Tipps, um zu verhindern, dass andere meine Seite als meine Webseite speichern und kopieren

Einführung in die MySQL-Entsperr- und Sperrtabelle

jQuery realisiert den Shuttle-Box-Effekt

Bearbeiten Sie zwei Datenspalten als neue Spalten in SQL

Richtige Verwendung der Vue-Funktion Anti-Shake und Throttling

Artikel empfehlen

MySQL 5.6.37 (zip) Download Installationskonfiguration Grafik-Tutorial

Die Aktualisierung der Seite zur Formularübermittlung springt nicht

Leistung des Node+Express-Testservers

HTML-Kontrollkästchen Klicken Sie auf den Beschreibungstext, um den Status auszuwählen/abzuwählen

Über die praktische Anwendung von HTML-Mailto (E-Mail) sprechen

Zusammenfassung der 6 Fähigkeiten, die zur erfolgreichen Webseitenerstellung erforderlich sind

Uniapp implementiert Beispielcode für die Anmeldung mit DingTalk-Scancode

js realisiert Warenkorb-Add- und Subtraktions- sowie Preisberechnungsfunktionen

So erstellen Sie mit CSS eine Bildlaufleiste mit fester Navigation und Links- und Rechtsverschiebung

So installieren Sie die grüne Version von MySQL Community Server 5.7.16 und implementieren die Remote-Anmeldung

Implementierungscode für die teilweise Aktualisierung einer HTML-Seite

So verwenden Sie reguläre Ausdrücke, um Platzhalterdomänennamen in Nginx automatisch abzugleichen

Detaillierte grundlegende Operationen an Datentabellen in der MySQL-Datenbank

Regeln für die Gestaltung des Anmeldeformulars

Die Verknüpfungsmethode zwischen Menü und Registerkarte von vue+iview