Eingabebox - CSS

Hallo,

und gleich zu Beginn entschuldige ich mich für den schlecht gewählten Betreff allerdings ist das was ich gesehen habe (… dort hinter dem Licht auf der anderen Seite wo alles so schön war… :smiley: ) nicht ganz so leicht beschreiben. :smiley:

Auf folgender Seite: design-noir.de/webdev/JS/addEvent/

ist ganz unten ein Tool mit dem man Kommentare senden kann und die Eigenschaften des Feldes “Name”, “E-Mail – wird nicht veröffentlicht” und “Website” haben mich einfach umgehauen.

Zum einen verändert sich die Farbe der Beschreibungen (werden in diesem Fall heller) und zum andern werden die eingabefelder orange umrahmt wenn man sie angklickt.

Leider sind die CSS-Dateien nur für den Server selbst zugänglich sonst hätte ich längst mal einen kleinen Blick hinein geworfen. :smiley:

Nun meine Frage an euch, wie ist soetwas tolles zu realisieren? Mit welchen Mitteln wurde da gearbeitet?

Mit freundlichen Grüßen

MaxT :wink:

Nachtrag: Das ganze scheint nur im Firefox zu funktionieren.

Da hast du dein Stylesheet: design-noir.de/.stile/_default.css

Bin ich dämlich… wegen dem Punkt vor dem Pfad habe ich es gar nicht erst versucht dass sah für mich auf den ersten Blick aus als wäre der Punkt vor dem dateinamen, entschuldigung für die unnötige Mühe die ich gemacht hab. :motz:

Mit freundlichen Grüßen

MaxT

hi,

solche tollen Effekte lassen sich nicht mit CSS alleine realisieren - zumindest nicht die Farbänderung der Beschriftung. Du musst mit einer Kombination aus JS und CSS arbeiten.

Den Beschriftungen gibst du jeweils mittels eines span-Containers eine eindeutige ID. Den Tabellenzellen mit den Beschriftungen gibst du dann folgende HTML-Attribute:

onnouseover="document.getElementById('die-id-des-beschriftungsspans-in-dieser-zelle').style.color = 'gewünschte-neue-schriftfarbe';" onmouseout="document.getElementById('die-id-des-beschriftungsspans-in-dieser-zelle.style.color = 'alte-farbe';" document.getElementById() sucht das span-Element und style.color gibt dem Element einen neuen CSS-Wert für color.

Den Formularfeldern fügst du folgende Attribute hinzu:

Die oben zugewiesenen Werte musst du natürlich noch nach deinen Wünschen anpassen. Wenn du ein wenig Ahnung von JavaScript hast, kannst du, wenn du möchtest, die Vorgänge auch noch in eine externe Funktion auslagern. Wenn nicht, dann kann ich das auch für dich machen :wink:

Der Code ist noch nicht getestet, müsste theoretisch aber funktionieren. Ich werde ihn gleich testen.

lg

mit :active müsste doch das ganze auch funktionieren, wenn auch bei IE 6 vermutlich nicht

Wenn dann mit :hover, aber ziehe bei so einem Dekokram JavaScript vor. Und wie gesagt, die Pseudoklassen werden nicht vollständig von allen Browsern unterstützt.

:active für die umrandung wenn in die box geklickt ist, hover sollte eh klar sein…