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:

Folge einfach diesem Link (öffnet in einem neuen Tab), um dir das Beispiel im Browser anzuschauen.

Browser Test

Das oben genannte CSS Snippet habe ich darüber hinaus in folgenden Browsern getestet:

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

In den genannten Browsern funktioniert das Snippet dabei einwandfrei. Ich kann jedoch leider nicht versichern, dass dieses CSS Snippet auch in hier nicht aufgeführten Browsern funktioniert.


Anzeige:


Schreibe einen Kommentar