mootools - custom Form Elements 1.8beta: Checkboxen und Radiobuttons selbst per CSS gestalten

1 minute read

mootools - custom Form Elements 1.8beta: Checkboxen und Radiobuttons selbst per CSS gestalten thumb image

Update 08.01.10: Custom Form Elements hat sich weiterentwickelt und ist nun unter http://customformelements.net zu finden.

Ein kleines Stück Code, welches Checkboxen und Radiobuttons (und jetzt auch viele andere Formularelemente) per Javascript durch kleine DIV-Container ersetzt, welche man dann selbst per CSS gestalten kann.

An der Funktionalität jeder Checkbox und der Radiobuttons im Formular ändert sich nichts :) Auch Labels werden unterstützt. Es ist damit also möglich, per CSS die Styles der Elemente eines Formulars anzupassen > siehe Demoseite.

Kurzinfo:

  • custom Form Elements 1.8beta – Checkboxen und Radiobuttons selbst per CSS stylen
  • Größe ca. 17 kB (komprimiert; inkl. aller Module)
  • basiert auf mootools ab v1.1
  • benötigt folgende mootools Module
    • Core, Class,Class.Extras, Array, String, Function, Number, Element, Element.Event, Element.Filters, Element.Selectors, Window.DomReady
  • Lizenz: MIT
  • erfolgreich getestet unter: IE7+, Firefox 2+, Opera 9.02+, Chrome 3+

Features:

  • ersetzt
    • Checkboxes
    • Radiobuttons
    • Fileupload
    • Textinput (inkl. Password) und Textarea
    • Select
    • Submit/Reset/Image
  • … auf der gesamten Seite oder in einem bestimmen Element (z.B. Formular) mit einer angegebenen ID durch kleine DIV-Container
  • generiert auf Wunsch Tooltips anhand der title-Attribute
  • unterstützt Tabbing / Fokussierung
  • „unobstrusive“ – ohne Javascript werden die normalen Formularfelder gezeigt
  • weiteres auf der Demoseite

Download:

Demo:

This library helped you building great things? Buy me a beer :)

Comments

Leave a comment — Edit this page on github and issue a PR for your comment please. HowTo?