nicht angemeldet
Suchfeld nach W3C-Vorbild?
suitHallo,
auf http://www.w3.org/ findet sich oben rechts ein Textfeld für Suchbegriffe, dass mit einem blassen, farbigen Google-Schriftzug hinterlegt ist.
Habe mir den Quellcode angeguckt, komme aber nicht darauf, wie dieser "Effekt" da technisch eingefügt wurde.... kann vielleicht jemand helfen?
danke!
Peter
-
auf http://www.w3.org/ findet sich oben rechts ein Textfeld für Suchbegriffe, dass mit einem blassen, farbigen Google-Schriftzug hinterlegt ist.
Habe mir den Quellcode angeguckt, komme aber nicht darauf, wie dieser "Effekt" da technisch eingefügt wurde.... kann vielleicht jemand helfen?input { background-image:url(); }
input:focus { background-image:none; }mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
input { background-image:url(); }
input:focus { background-image:none; }Ist aber suboptimal da beim Verlassen und nicht absenden das Hintergrundbild wieder da ist ;)
-
input { background-image:url(); }
input:focus { background-image:none; }Ist aber suboptimal da beim Verlassen und nicht absenden das Hintergrundbild wieder da ist ;)
input:not(value="") { background-image:url(); }
input:focus { background-image:none; }Jede Lösung ist irgendwann suboptimal.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
input:not(value="") { background-image:url(); }
Und was soll das bewirken?
-
input:not(value="") { background-image:url(); }
Und was soll das bewirken?
Unabhängig davon dass die Syntax kaputt ist,
input:not([value=""]) { ... }
scheint das nicht zu klappen, da CSS augenscheinlich nicht den Attributinhalt im DOM auswertet.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
input:not(value="") { background-image:url(); }
Und was soll das bewirken?
Unabhängig davon dass die Syntax kaputt ist,Das war das erste auf dass ich abzielte.
input:not([value=""]) { ... }
scheint das nicht zu klappen, da CSS augenscheinlich nicht den Attributinhalt im DOM auswertet.Richtig, das wäre meine Folgefrage gewesen - es gibt zwar :checked oder :indeterminate aber Pseudoklassen um zu bestimmen ob Textearas oder input-Elemente befüllt sind, gibt es nicht.
-
-
-
-
-
-
-
Habe mir den Quellcode angeguckt, komme aber nicht darauf, wie dieser "Effekt" da technisch eingefügt wurde.... kann vielleicht jemand helfen?
Wie das gemacht wird, hat dir Beat schon verraten, ergänzend habe ich im folgenden Artikel einige Lösungsmöglichkeiten dafür zusammengefasst.
Vorbelegte Formularfelder leeren
Prinzipiell ist das dritte Beispiel für dich interessant - allerdings muss das label-Element dafür ein Hintergrundbild erhalten und der Text z.B. mit negativem text-indent ins Nirvana befördert werden.
