Wie erstelle ich eine Schaltfläche „Suchen' in einem Texteingabefeld?

Erstellen einer Schaltfläche „Suchen“ in einem Texteingabefeld

Beim Anzeigen des Quellcodes bestimmter Websites bemerken Sie möglicherweise eine „Suche“. " Element bestehend aus einem Textfeld gefolgt von einer Schaltfläche „Lupe“. Dieser Artikel führt Sie durch den Prozess der Erstellung eines ähnlichen Elements in Ihrer Webanwendung.

Erhalten des „Lupe“-Bildes

So erstellen Sie die „Lupe“ Um ein Bild zu erstellen, können Sie ein SVG-Symbol oder ein kleines PNG-Bild verwenden. Im Internet sind zahlreiche Ressourcen verfügbar, in denen Sie kostenlose oder kommerzielle Symbole finden können.

Implementieren des Buttons

Sobald Sie das Bild haben, können Sie es in Ihre Texteingabe integrieren Feld mit CSS. Hier ist ein Beispiel:

<code class="CSS">#g-search-button {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  left: -22px;
  top: 3px;

  background-color: black;  /* Replace with your own image */
}</code>

In diesem CSS-Code:

• display: inline-block; ermöglicht die Platzierung des Elements in einer Zeile mit Text.
• Breite und Höhe geben die Abmessungen der Schaltfläche an.
• Position: relativ; ermöglicht Ihnen, die Positionierung der Schaltfläche manuell anzupassen.
• Nach links und oben verschieben Sie die Schaltfläche an eine Position, die das rechte Ende des Suchfelds überlappt.
• Hintergrundfarbe kann durch eine tatsächliche ersetzt werden Bild.

Arbeitsbeispiel

Das folgende JSBin bietet ein funktionierendes Beispiel des Codes: https://jsbin.com/vehobew/edit?html, css,Ausgabe

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Schaltfläche „Suchen' in einem Texteingabefeld?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!