What?
Form controls such as radio buttons, check boxes, and text areas are currently delegated by the different devices one uses. Depending on whether one is using a Mac or PC, one will get differently-styled form controls. iOS and Android each serve their own form controls that are optimized for the touch-based user interface. This presents a challenge to web designers who wish to create controls that integrate better with their design.
Trying to create custom controls is often a tedious process. It isn't difficult, but there are a large number of controls to style and it's finicky.
Why?
This simple solution allows for custom form controls to be easily created and sent to different display resolutions. It allows web designers flexibility with the layout, colour, and size of forms without compromising usability across platforms.
Specifics
These custom form controls are implemented by simply downloading and linking form.css in the <head> section of the relevant pages. Two colour schemes are provided. If you want to use one of mine, declare it with either class="dark" or class="light" in the <form> tag.
Instead of using the built-in schemes, you should use this as a bare framework to build on top of. Standard form controls have been declared, along with the interactions one may have with them.
These form controls work in most modern browsers, with some exceptions:
- I really don't give a crap about Opera.
- Gecko browsers (Firefox, Camino, etc.) have some odd rendering issues with known bugs. I have no way of overriding these at the moment.
- They should play nice with Internet Explorer 9 provided you also use Selectivizr. If you require support for IE8 or below, you're going to have to fight those demons on your own. (But please let me know if you squash any bugs, and I'll credit you).
This is an ongoing project, and the framework will change over time.
Basic Demo (Dark Version)
Background Demo (Light Version)
Download
Grab a copy of form.css and start building your custom controls on top.
This is version 0.99. It isn't quite finished.
Or just view the CSS file.