Leuchtende Rahmen für Formularfelder

Zuletzt aktualisiert: Sonntag, 01. Januar 2017 Geschrieben von Jan Pionzewski

Mittels CSS ist es möglich, leuchtende Rahmen um Formularfelder herum zu erstellen. Die Rahmen leuchten dabei nur dann, sobald die Formularfelder 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

Folgender CSS-Code muss in dein Stylesheet integriert werden, damit du den Effekt auf deiner Webseite nutzen kannst. Die Farben können nach Belieben angepasst werden.

 

Code-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 wurde in folgenden Browsern gestestet:

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

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

 

 

Kommentar schreiben