Wie erstelle ich eine benutzerdefinierte Schaltfläche „Suchen“ mit einem Lupensymbol?

Texteingabefelder mit einer benutzerdefinierten Schaltfläche „Suchen“ verschönern

Um ein Suchelement zu erstellen, das dem auf bestimmten Websites ähnelt, folgen Sie den Anweisungen Diese Schritte:

Erstellen der Grundstruktur:

1. Kodieren Sie ein Texteingabefeld:

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

2. Fügen Sie einen Tag zum Halten des Lupenbilds:

<code class="html"><span id="g-search-button"></span></code>

Hinzufügen des Lupenbilds:

Um das Lupenbild einzubinden, weisen Sie es mithilfe des CSS-Hintergrunds zu -image-Eigenschaft:

<code class="css">#g-search-button {
  background-color: black;  /* Replace with your own image */
}</code>

Positionierung und Stil:

So positionieren Sie das Bild im Texteingabefeld:

<code class="css">#g-search-button {
  position: relative;
  left: -22px;
  top: 3px;
  width: 16px;
  height: 16px;
}</code>

Hier wird platziert Das Bild befindet sich leicht links und überlappt den rechten Rand des Suchfelds.

Anpassung:

Ändern Sie das Erscheinungsbild der Schaltfläche, indem Sie die Werte im #g anpassen -search-button CSS-Block, einschließlich Hintergrundfarbe, Größe und Positionierung.

Beispiel in Aktion:

Sehen Sie sich das folgende JSBin-Beispiel an, um eine voll funktionsfähige Version zu sehen Implementierung des Suchelements:

[JSBin Demo](https://jsbin.com/xahepu/edit?html,css,output)

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