Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

DDD
Freigeben: 2024-11-02 04:59:02
Original
715 Leute haben es durchsucht

How to Create a

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage