Rahmen um aktives Feld im Kontaktformular (Glowing Form Field)

[tomathen]

Hallo zusammen,

versuche schon seit Tagen dieses ganz nette (und auf vielen Webseiten verwendete) Feature in NOF umzusetzen. Mal wieder bekommen ich es einfach nicht hin. Vielleicht geht das ja auch gar nicht mit NOF und dem Kontaktformular? Oder es ist zu schwierig?
Vielen Dank!!

Hier ein Beispiel:
http://www.tutorialworld.net/css-glowing-form-field-on-focus/

[nettesekel]

Schwierig ist das nicht wirklich. Im Prinzip bräuchtest du nur den CSS-Code hinterlegen und deinem Formular die class "form" zuweisen. So ist es dort in dem Tut gemacht worden. Da NOF uns allerdings nicht in den Formular-Tag lässt um eine class einzutragen, geht das so nicht. Man könnte jetzt natürlich einfach was pfuschen und vorhandene form-Tags auskommentieren um eigene einzufügen, aber das finde ich schrecklich.

Der nächste Weg wäre dann über eine ID zu gehen, aber zumindest mein NOF schreibt die ID, die ich in den Eigenschaften (vierter Reiter) vergebe, nicht in den Quelltext. Hurra!!!

Also würde ich es einfach mal so versuchen.
Formularseite >> Layout-HTML >> zwischen den head-Tags

Code: HTML5

1. <style type="text/css">
2. input{
3. border: 1px solid #ddd;
4. outline: none;
5. border-radius: 4px;
6. -webkit-transition: all 0.30s ease-in-out;
7. -moz-transition: all 0.30s ease-in-out;
8. -ms-transition: all 0.30s ease-in-out;
9. -o-transition: all 0.30s ease-in-out;
10. transition: all 0.30s ease-in-out;
11. }
12. input:focus {
13. border-color: #83b4db;
14. box-shadow: 0 0 10px #8fbfe6;
15. -moz-box-shadow: 0 0 10px #8fbfe6;
16. -webkit-box-shadow: 0 0 10px #8fbfe6;
17. }
18. </style>

PS. Schau mal in deinen GB-Thread.

[tomathen]

Wow nettesekel!!! Das sieht ja schon sehr vielversprechend aus!! Geht das auch für die Dropdownfelder und für ein mehrzeiliges Eingabefeld? Im Moment "leuchtet" es nur bei den einzeiligen Eingabefeldern.

Vielen vielen Dank!!!!

[nettesekel]

Müsste gehen, dann muss der Code ergänzt werden...

Code: HTML5

1. <style type="text/css">
2. input,
3. select,
4. textarea{
5. border: 1px solid #ddd;
6. outline: none;
7. border-radius: 4px;
8. -webkit-transition: all 0.30s ease-in-out;
9. -moz-transition: all 0.30s ease-in-out;
10. -ms-transition: all 0.30s ease-in-out;
11. -o-transition: all 0.30s ease-in-out;
12. transition: all 0.30s ease-in-out;
13. }
14. input:focus,
15. select:focus,
16. textarea:focus{
17. border-color: #83b4db;
18. box-shadow: 0 0 10px #8fbfe6;
19. -moz-box-shadow: 0 0 10px #8fbfe6;
20. -webkit-box-shadow: 0 0 10px #8fbfe6;
21. }
22. </style>

[tomathen]

Man nettesekel!! Ich fummel da seit Tagen rum! Warum frag ich dich nicht gleich? Dann klappts auch mit dem Feierabend 
Ich danke dir!!!!!! Super!