Bild in Suchfeld einfügen

[j0k3r87]

Hallo Leute,

habe gerade schon gesucht, bisher aber noch nichts zu meiner Frage gefunden:
Gibt es eine Möglichkeit ein Bild in das Suchfeld zu bekommen? Also das der Submit Button nicht mehr rechts daneben ist? Das Suchfeld wurde bisher noch nicht angepasst, ist also noch wie nach einer frischen Installation.

Edit:

Hab noch ein Bild eingefügt, wie ich mir das Ergebnis vorstelle.

Linkback: https://www.modified-shop.org/forum/index.php?topic=33128.0

[j0k3r87]

Hat niemand dafür einen Vorschlag?

[Godzilla]

Hallo Leute,

habe gerade schon gesucht, bisher aber noch nichts zu meiner Frage gefunden

Da gibt es ca. 50 verschiedene Möglichkeiten (CSS, Jquery, CSS-Background-Image, Icon-Font, Icon auf dem Submit-Button ...) und alle haben ihre Vor- und Nachteile (z.B. setzen manche Browser selbstständig ein Lupen-Icon ein und plötzlich hat man dann zwei Lupen-Icons).

Ich würde ein CSS-Background-Image für input type=search nehmen.

https://www.google.de/search?q=css+search+box+icon+inside&biw=1366&bih=646&source=lnms&tbm=isch&sa=X&ved=0CAcQ_AUoAWoVChMIpKuFuLGFxgIVCTgUCh2KVQD2

[hpzeller]

Hallo j0k3r87

Wenn Du das xtc5-Template verwendest habe ich folgenden Vorschlag.

In 'templates/xtc5/boxes/box_search.html'

suche

Code: XML  [Auswählen]

<td>{$INPUT_SEARCH}</td>

ersetze mit

Code: XML  [Auswählen]

<td><div style="position: relative;">{$INPUT_SEARCH}<img style="display: block; position: absolute; right: 0px; top: 0px; text-align: center; z-index: 2;" src="{$tpl_path}img/button_quick_find.gif" alt=""  /></div></td>

oder ersetze mit (bei diesem Code ist das Bild gleichzeitig der Sende-Button)

Code: XML  [Auswählen]

<td><div style="position: relative;">{$INPUT_SEARCH}<input type="image" style="display: block; position: absolute; right: 0px; top: 0px; text-align: center; z-index: 2;" src="{$tpl_path}img/button_quick_find.gif" alt=""  /></div></td>

Das angehängte 'button_quick_find.gif' legst Du ins 'templates/xtc5/img/' Verzeichnis.

Gruss
Hanspeter

[j0k3r87]

Danke für die Hilfe, hat wunderbar funktioniert !