✔ Hintergrundposition ändern bei focus

[qsrs]

Hallo,

ich möchte input-Felder mit einem Hintergrund versehen. Dieser soll sich ändern, wenn das Textfeld angeklickt wird. Das versuche ich mit einem simplen Trick, indem ich die Position des Hintergrundes einfach ändere. D.h. das Bild selbst enthält beide Hintergründe, einmal das für den Normalzustand des Textfeldes, und dann noch das, wenn das Textfeld angeklickt wird. Der Hintergrund soll also bei "focus" einfach die Position ändern. Allerdings funktioniert es noch nicht, und ich weiß nicht wo ich den Fehler habe:

.fieldHolder {
	width: 420px;
	height: 28px;
	background: url("../media/images/bg_textfield.png") no-repeat;
	float: left;
}
.textInput {
	color: #013d5b;
	width: 420px;
	height: 23px;
	background: none;
	border: none;
	margin-top: 4px;
	margin-left: 5px;
}
.textInput input:focus {
	background-position:0px -28px
}

Wäre für Hilfe wieder sehr dankbar.

 

[Sven Mintel]

Moin,

dieses <input> ...hat dies den Klassennamen "fieldHolder"?
Weil wenn nicht, hat es auch kein Hintergrundbild, es steht dort zumindest keins im CSS

 

[SpiceLab]

Um die Position des Hintergrundbildes zu ändern, wäre hier dieses Markup vonnöten:

<input type="text" class="fieldHolder" />

womit der Selektor korrekterweise so formuliert lautet:

input.fieldHolder:focus {
    background-position:0px -28px
}

//edit:

Ich vermute mal, dass du hier erneut den Fehler begehst, die Formatierung eines Elternelements (.fieldHolder) über dessen Nachfolgeelement (<input>) zu ändern, was nicht möglich ist, wie ich es dir kürzlich schon in deinem Thema Hover- Effekt mit runden Ecken und Transparenz erläutert hatte.

 

[qsrs]

Sorry, ihr habt beide recht. Ich hatte noch ein div-Element, in welchem ein Textfeld untergebracht war - völlig überflüssig. Habe nun den Hintergrund direkt auf das Textfeld angewendet.

Vielen Dank für den Denkanstoß.