Hallo zusammen – habt ihr euch auch schon oft über die unschönen Formular-Elemente geärgert, die ihr nicht so einfach per CSS Anpassen könnt (Checkboxen und Radiobuttons)? Mit Hilfe von Javascript-Frameworks (wie z.B. jQuery und Prototype) und deren vielseitigen Plugins sind wir allerdings nicht weiter an diese Optik gebunden – Und das bei minimalem Aufwand!

Javascript hilft 🙂

Ein paar Beispiele für jQuery wären „checkbox„, „jqTransform„, „iButton“ oder auch „iPhone-Style-Checkboxes“ (auch für Prototype verfügbar) – Plugins wie diese gibt es ehrlich gesagt wie Sand am Meer.

Und wie funktionieren sie?

Auch hier gibt es ganz verschiedene Anlaufstellen… Manche benutzen ein grafisches Label als klickbaren Bereich, andere simulieren das komplette Formular-Element und schreiben den Wert im Hintergrund (via Javascript) in das Original: Die Plugins sind in der Regel (X)HTML valide und benutzen CSS und simple Grafiken, damit auch alte Browser (wie der IE7) damit klar kommen 😉

Viele der Plugins sind in der Anwendung sehr einfach und erlauben uns meist eine 100% grafische Gestaltung – Die Grafiken werden üblicherweise als Sprites in einer Datei abgelegt – dadurch wird jegliche Anpassung um einiges einfacher.

Ich persönlich werde mir diese Plugins für meine zukünftigen Projekte mal genauer ansehen – kaum einer mag noch Formulare die nicht ansprechend gestaltet sind…

Doch es gibt noch weitere „nicht-stylebare“ Formular Elemente wie z.B. das in die Jahre gekommene „Upload“ Feld. Hier bieten uns HTML (5) und Javascript schicke Alternativen an, die dem Komfort einer nativen Applikation kaum noch nachstehen – Doch dieses Thema werde ich erst nächstes mal anschneiden!

Bis dahin wünsche ich eine angenehme Woche und einen guten Start in die Ferienzeit!

One comment on “Checkboxen und Radiobuttons selbst designen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.