[dombur]

Hallo zusammen.

Ich stehe momentan vor dem Problem, dass ich gerne ein Icon vor bzw. in einem Input-Feld platzieren möchte. Meine erste Idee war, das Ganze mit input:before zu lösen aber das wird leider nicht unterstützt. Das Icon soll auch nicht als Grafik sondern als WebFont eingebunden werden (da die Seite responsive werden soll).

Momentan habe ich es so gelöst, dass ich ein <span> vor dem Input-Feld habe und dies so gestylt habe, dass es aussieht als wäre das Icon im Input-Feld. Irgendwas sagt mir aber, dass das noch schöner gehen könnte. Vor allem, weil ja nur das Input-Feld gehighlightet wird, wenn es im :focus ist und sich die Outline ja leider nicht auf bestimmte Seiten begrenzen/ausschließen lässt.

Hat hier vielleicht jemand einen Ansatz, der mir gefallen könnte? Oder seid ihr der Meinung, dass der "Span-Ansatz" bereits der beste Weg ist?

Freue mich auf eure Antworten.

[Karlarsch]

Da Input-Elemente keinen Content haben, können :before und :after nicht greifen, da sie Inhalte eben vor und nach dem Content eines Elements einfügen.

Du könntest also dein Input-Feld in ein weiteres Element packen (aktuell stellst du es ja davor) und auf dieses mittels :before/:after einwirken.

Die einzige Möglichkeit ein Icon in ein Input-Feld zu bekommen ist ein Hintergrundbild. Mit einem Webfont wird das nichts.

Du kannst aber auch probieren das Input-Feld über ein anderes Element legen in welchem sich als Content eben dein Webfont-Icon befindet. Oder du legst eben dieses Element über dein Input-Feld.

Mittels Nachbarselektor "+" könntest du dann auch mittels CSS auf einen Fokus im Input-Element reagieren.

Gruß
Karl

[dombur]

Okay, ich werd noch ein wenig rumtüfteln. Danke Karlarsch für die Tipps!