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.


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.


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:

This is an ongoing project, and the framework will change over time.


Basic Demo (Dark Version)

City Town Hamlet
Ice Cream Foie Gras Risotto

Background Demo (Light Version)

City Town Hamlet
Ice Cream Foie Gras Risotto


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.