Formulareingabefeld mit Grafik hinterlegen

[Klaus]

Hallo zusammen,

ich würde gerne ein schlichtes Eingabefeld auf meiner Webseite haben, jedoch hinterlegt mit einer Grafik. Genau in der Art wie ich das gerne hätte ist es auf der apple.com Webseite, rechts oben, das Suchfeld.

Ich habe alles durchgesehen, mir die CSS-Dateien runtergeladen etc., ich komme nicht drauf wie die es machen.

Könnt ihr mir einene Tipp geben?

Kennt ihr eine Quelle oder Tutorial wo ich das nachsehen kann, um es verstehen zu können?

Ich bin nur semi-profesionell im Programmieren/html-Seiten erstellen, daher habe ich es auch durch langes Probieren vielleicht nicht herausgefunden.

Vielen Dank für jeden Tipp im Voraus.

Gruß,

Klaus

[Beat]

Suchst du das?
http://de.selfhtml.org/html/formulare/formularbuttons.htm#grafische

mfg Beat

[Klaus]

Nein das nicht, das mit dem Button ist klar. Ich möchte das Eingabefeld mit einer Grafik unterlegen.

Gruß, Klaus

Suchst du das?
http://de.selfhtml.org/html/formulare/formularbuttons.htm#grafische

mfg Beat

[EKKi]

Mahlzeit Klaus,

Nein das nicht, das mit dem Button ist klar. Ich möchte das Eingabefeld mit einer Grafik unterlegen.

Ohne mir jetzt den Quelltext der von Dir verlinkten Apfelseite angeschaut zu haben, würde ich folgendes ausprobieren:

1. Entweder dem <input>-Element eine http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_image@title=Hintergrundgrafik verpassen

2. oder dem <input>-Element einen <http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_color@title=transparenten Hintergrund> geben und es über einer entsprechenden Grafik http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=positionieren.

MfG,
EKKi

[Klaus]

Hallo zusammen,

super vielen Dank für die vielen Anregungen, ich habe es geschafft damit. :-)

Gruß, Klaus

[suit]

Nein das nicht, das mit dem Button ist klar. Ich möchte das Eingabefeld mit einer Grafik unterlegen.

was hindert dich daran input[type=text] { background: url(example.png) }

nachdem dämliche browser den attribut-selektor nicht verstehen, könntest du dem input-feld auch eine klasse zuweise <input class="text" /> und dann mit input.text { background: url(example.png) } arbeiten

[Beat]

Nein das nicht, das mit dem Button ist klar. Ich möchte das Eingabefeld mit einer Grafik unterlegen.

Du willt also lernen, wie man Formularfelder mit CSS formatieren kann?

Allgemein
http://de.selfhtml.org/css/index.htm
Spezifischer
http://de.selfhtml.org/css/eigenschaften/index.htm
Thema Hintergrund und Farben
http://de.selfhtml.org/css/eigenschaften/hintergrund.htm

mfg Beat

[Hopsel]

Hi Klaus!

Könnt ihr mir einene Tipp geben?

Die Datei search_decorator.js nutzt die Funktion decorateSearchInput aus der Datei apple_core.js.

Der Aufwand der dort betrieben wird, ist mMn aber nicht gerechtfertigt.

MfG H☼psel

[Steel]

Hoi!

Auch ohne jetzt das JS analysiert zu haben: Mit dem Hintergrund des Inputfeldes wird doch gar nichts gemacht, oder? Wenn ich das richtig sehe haben wir ein einfaches Inputfeld mit einer kleinen Grafik davor und dahinter dargestellt.

[Hopsel]

Hi Steel!

Auch ohne jetzt das JS analysiert zu haben: Mit dem Hintergrund des Inputfeldes wird doch gar nichts gemacht, oder? Wenn ich das richtig sehe haben wir ein einfaches Inputfeld mit einer kleinen Grafik davor und dahinter dargestellt.

Ja, so seh ich das auch. Deshalb finde ich das auch überflüssig. Zumal man auch sehr gut eine Hintergrundgrafik dafür nutzen kann.

MfG H☼psel