Leuchtende Rahmen für Formularfelder

Mittels CSS ist es überdies möglich, leuchtende Rahmen um Formularfelder herum zu erstellen. Die Rahmen leuchten dabei nur dann, sobald die Felder aktiv sind. Somit kann man den Seitenbesuchern eine visuelle Unterstützung bieten.

Mit dem folgenden Snippet kannst du schließlich den leuchtenden Rahmen erstellen.

 

CSS Snippet für leuchtende Rahmen

Integriere dafür folgendes Snippet in dein Stylesheet, um den Effekt auf deiner Website zu nutzen. Die Farben kannst du dabei nach Belieben anpassen. Du kannst aber natürlich auch die anderen Werte verändern, um einen passenden Stil für deine Website zu finden.

 

Beispiel:

input[type=text], textarea {
 -webkit-transition: all 0.30s ease-in-out;
 -moz-transition: all 0.30s ease-in-out;
 -ms-transition: all 0.30s ease-in-out;
 -o-transition: all 0.30s ease-in-out;
 outline: none;
 padding: 3px 0px 3px 3px;
 margin: 5px 1px 3px 0px;
 border: 1px solid #DDDDDD;
}
 input[type=text]:focus, textarea:focus {
 box-shadow: 0 0 5px rgba(81, 203, 238, 1);
 padding: 3px 0px 3px 3px;
 margin: 5px 1px 3px 0px;
 border: 1px solid rgba(81, 203, 238, 1);
}

 

Anzeigebeispiel ansehen

 

Browser-Test

Das Snippet habe ich dabei in diesen Browsern getestet:

  • Google Chrome 19
  • Internet Explorer 9
  • Firefox 13
  • Opera 11.64

In allen hier genannten Browsern funktionierte das Snippet dabei einwandfrei. Leider kann ich jedoch keine Garantie geben, dass das oben genannte Script in anderen Browsern auch funktioniert.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.