Leuchtende Rahmen für Formularfelder

Mittels CSS ist es 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 nachstehendem Code-Snippet kannst du den leuchtenden Rahmen erstellen.

 

CSS-Code für leuchtende Rahmen

Den folgenden CSS-Code musst du in dein Stylesheet integrieren, damit du den Effekt auf deiner Webseite nutzen kannst. Die Farben kannst du nach Belieben anpassen.

 

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-Kompatibilität

Das Code-Beispiel habe ich in folgenden Browsern getestet:

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

In allen hier genannten Browsern funktionierte der CSS-Code dabei einwandfrei. Leider kann ich jedoch keine Garantie geben, dass das oben genannte Script in anderen Browser-Versionen auch funktioniert.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

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