Mehrere Selektoren

[finke]

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

[Kai345]

[latex]Mae  govannen![/latex]

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='';"
[...] ersetzen

Anderer Ansatz: http://bittersmann.de/articles/label-inside/

Stur lächeln und winken, Männer!
Kai

[finke]

[latex]Mae  govannen![/latex]

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='';"
[...] ersetzen

Anderer Ansatz: http://bittersmann.de/articles/label-inside/

Stur lächeln und winken, Männer!
Kai

Hallo,
Mh, würde gehen, funktioniert aber wieder nur mit Javascript. Ich war eigentlich ganz froh, dass ich JS komplett herraus nemen konnte, da ich so auch Leute mit NoScript und ähnlichen den vollen Komfort geben konnte. Da es ne Seite für nen Clan war war die Bindung an CSS3 auch kein Problem, da solche Leute Ihre Browser idr auf dem aktuellen Stand halten und wer in dieser Szene nutzt schon den IE :P

Außerdem kann ich es so nicht so schön bunt anzeigen :P
Link zur immer noch nicht fertigen HP:
http://www.freaky-murlocs.de/index.php?news
PS: Falls jemanden andere grobe Schnitzer auffallen, bin ich für Kritik gerne Dankbar.

Gruß finke

[Gunnar Bittersmann]

@@finke:

nuqneH

Anderer Ansatz: http://bittersmann.de/articles/label-inside/
Mh, würde gehen, funktioniert aber wieder nur mit Javascript.

Mit erwähnter Kombination von @required und :valid sollte das auch ohne JavaScript umsetzbar sein.

Qapla'

[finke]

@@finke:

nuqneH

Anderer Ansatz: http://bittersmann.de/articles/label-inside/
Mh, würde gehen, funktioniert aber wieder nur mit Javascript.

Mit erwähnter Kombination von @required und :valid sollte das auch ohne JavaScript umsetzbar sein.

Qapla'

Jo, sorry, hatte deine Nachricht iwie erst als zweite Antwort gelesen, und habe es auch so umgesetzt. Habe zusätzlich die Labels noch eingebaut und unsichtbar gemacht, wegs der blinden WoW Spieler :P

[Gunnar Bittersmann]

@@finke:

nuqneH

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.

Mit @placeholder [HTML5] wäre das nicht passiert.

#loginbox input[type="text"]:not([value=""]),
#loginbox input[type="password"]:not([value=""])
[…] funktioniert aber weder im Aktuellen FF noch im Chrome. Hab ich irgendwo nen Denkfehler drinnen?

Durch Ausfüllen eines Eingabefeldes änderst du nicht den Wert seines @value-Attributs.

Oder geht so was überhaupt nicht?

Doch, mit @required [HTML5] und  :valid [CSS3-UI]

Hat irgend einer Ne Idee, Wie ich das ganze Grundsätzlich besser lösen kann?

Ja. Verzichte nicht auf label! Dadurch wird deine Seite für Blinde unbedienbar. (Abschnitt „Labels“)

Label lassen sich auch in Eingabefeldern plazieren.

Qapla'