CSS Input Textfeld mit Hintergrundbild, Cursor Problem

[Agratos]

Hallo, zur Zeit arbeite ich an einem Prjekt, bei dem ich gerne ein Hintergrundbild für Eingabefelder verwenden würde. Das klappt soweit auch ganz gut, allerdings ist der Cursor, wenn man in das Inputfeld reinklickt so groß, wie die gesamte Höhe des Bildes. Sobald man einen Buchstaben schreibt, ist er wieder normal groß.

Hier mal ein Bild:

Der dazugehörige Code:

.login_feld {
	width: 125px;
	height: 24px;
	border: 0px;
	padding-left: 5px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 0px;
	background-image: url('images/textfeld.png');
}

Wo liegt mein Fehler? Danke schon mal für die Hilfe.

 

[ziodraw]

Hast du es mal Browser übergreifend getestet. Im IE stelle es sich anders da (vermute du nutzt Firefox). Habe es im Firefox nachstellen können.

Hilft es, wenn du per Javascript immer ein Leerzeichen in das input Feld vorlegst?

 

[nierewa]

Kannst du den HTML-Code mit dazu liefern und eventuell dein Hintergrundbild mit anhängen?

Ich hab es gerade mal bei mir getestet und es funktioniert einwandfrei.
Welchen Browser nutzt du?

 

[monstergnom]

Mach doch einen Div-Container und setze dort dein Bild als Hintergrundbild. Dann fügst du in den Container dein input-Feld mit der "background-color: transparent;" und "border: 0;".

Sollte so klappen

 

[Agratos]

Ich benutze Firefox.
Der Html Code dürfte sich ja wohl von selbst erklären.

<input type="text" class="login_feld">

Zur Javascriptlösung: Das soll ein Feld zum Einloggen sein, da kann ich kein Leerzeichen gebrauchen. Das Hintergrundbild kann man sich ja theoretisch aus der Grafik da rausschneiden, aber hier nochmal das Bild:

Die Div Lösung könnte klappen, allerdings möchte ich trotzdem gerne wissen, woran das liegt. ^^

 

[nierewa]

Hallo.

Das Problem kannst du lösen,
indem du dem input-Feld ein value="Leerzeichen" gibst:

<input class="login_feld" type="text" name="" value=" " size="20" maxlength="50" />

 

[Agratos]

Zur Javascriptlösung: Das soll ein Feld zum Einloggen sein, da kann ich kein Leerzeichen gebrauchen.

Danke fürs Lesen.

Edit: Hat sich erledigt, der Text wurde automatiosch mittig positioniert und mir fehlte nur padding-top und bottom. Noch eine kleine Frage: Die Ecken, die eigentlich transparent sein sollten, sind leider weiß. Ist Transparenz bei Hintergrundbildern von input dingern nicht verfügbar?

 

[S.o.T.]

Da musst du noch "transparent" als Hintergrundfarbe vewenden.

 

[Agratos]

Super, danke dir.