Hallo, ich bräuchte mal Hilfe, bei ner kleinen Idee.
Und zwar möchte ich das alt bekannte javascript
onblur="if (this.value=='') this.value='E-Mail Adresse'" onfocus="if (this.value=='E-Mail Adresse') this.value='';"
Durch CSS und 2 verschiedene Hintergrundgrafiken ersetzen.
Habe mir dazu Für Ein Loginformular, jeweils für Name und Passwort Je eine Grafik gemacht, einmal blank und einmal, wo noch eine kleine Hilfe darin steht, was wo rein gehört. Und anschließend folgendes geschrieben:
HTML:
<input type="text" name="name" value="" maxlength="15"/><br />
<input type="password" name="pass" value="" maxlength="15" >
CSS:
#loginbox input[type="text"], #loginbox input[type="password"]{
width:184px;
height:25px;
padding:2px 5px;
text-align:center;
margin:2px 0px;
color:#ffad54;
}
#loginbox input[type="text"]{
background:transparent url('img/login/nick_bg.png') center top no-repeat;
}
#loginbox input[type="password"]{
background:transparent url('img/login/pw_bg.png') center top no-repeat;
}
#loginbox input[type="text"]:focus,
#loginbox input[type="text"]:hover,
#loginbox input[type="text"]:active,
#loginbox input[type="password"]:focus,
#loginbox input[type="password"]:hover,
#loginbox input[type="password"]:active
{
background-position:center bottom;
}
Da Geht so wiet ganz gut, mit dem einzigen Manko, dass wenn man seinen nick eingegeben hat, ja wieder die Hilfe angezeigt wird, und damit die Eingabe kaum mehr lesbar ist.
Also dachte ich mir, dass ich dies mit Hinzufügen von
#loginbox input[type="text"]:not([value=""]),
#loginbox input[type="password"]:not([value=""])
Zum Letzten Block lösen könnte. Das ist laut http://jigsaw.w3.org Auch valid, funktioniert aber weder im Aktuellen FF noch im Chrome. Hab ich irgendwo nen Denkfehler drinnen? Oder geht so was überhaupt nicht?
Hat irgend einer Ne Idee, Wie ich das ganze Grundsätzlich besser lösen kann?
Mit freundlichen Grüßen
finke