Wie erstelle ich eine Suchschaltfläche in einem Texteingabefeld?

Erstellen einer Suchschaltfläche in einem Texteingabefeld

Um das im bereitgestellten Screenshot gezeigte Suchelement zu erreichen, benötigen Sie eine Texteingabe Feld und ein angrenzendes Span-Element.

Das Texteingabefeld kann mit dem folgenden Code erstellt werden:

<input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" />

Für das Lupenbild können Sie die Eigenschaft „Hintergrundbild“ zum Überlagern verwenden es innerhalb des span-Elements. Darüber hinaus kann eine relative Positionierung verwendet werden, um das Bild am rechten Ende des Suchfelds auszurichten.

#g-search-button {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  left: -22px;
  top: 3px;

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

Im CSS-Code bestimmen die Breite und Höhe die Größe des Bildes, während links und oben die Größe des Bildes bestimmt wird Eigenschaften positionieren es relativ zum Suchfeld. Die Eigenschaft „Hintergrundfarbe“ kann durch die URL Ihres gewünschten Lupenbilds ersetzt werden.

Hier ist ein funktionierendes Beispiel für JSBin zur Veranschaulichung: [Link zum JSBin-Beispiel]

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