Skinnable CSS3 Metro Forms

Table of Contents

Skinnable CSS3 Metro Forms Demos

AcidJs.Forms is a powerful component that will give you total control over the form elements on your page without any additional markup or sophisticated JavaScript.

The component will seamlessly add cool metro looks to input boxes, buttons, file inputs, checkboxes, radiobuttons and dropdowns.

Please, view the source on this page and use your browser's developer tools for better insight on the operation, customization, API and usage of AcidJs.Forms

Textbox, Password and Textarea

Enabled Textbox

Disabled Textbox

Enabled Password

Disabled Password

Enabled Textarea

Disabled Textarea


Enabled Buttons

Disabled Buttons

Select Boxes

Enabled Dropdown

Disabled Dropdown




Unchecked and Disabled

Checked and Disabled

Radio Buttons

File Upload Input



Skinnable CSS3 Metro API


The API of AcidJs.Forms includes three methods - enable(), disable() and update().

The update() Method

The update() method is related to the custom event of the component, so you can check it here.

The enable(array) and disable(array) Methods

Use these methods to enable/disable (i.e. remove/add the disabled) state/attribute from an array of elements. The array should include the name attributes of the elements that will be enabled/disabled.

Disabled Buttons
Disabled Selects
Disabled Textboxes
Disabled Checkboxes
Disabled Radiobuttons
Disabled File Upload Inputs


The API of AcidJs.Forms implements one custom event - "acidjs-forms-domchanged", bound to the boundingBox of each instance of the component. You can trigger this event any time you have inserted new form elements, which need to be styled. For example, you can trigger the "acidjs-forms-domchanged" event after an AJAX call.

The "acidjs-forms-domchanged" Event

Click the button below to make an AJAX call, which will load more form controls to the form, then on success trigger the "acidjs-forms-domchanged" event to style these new controls.

You can trigger the "acidjs-forms-domchanged" event also by calling the update() method of the class.

Initialize on the Fly

AcidJs.Forms could be initialized not just when page loads, but also asynchronously - for example after ajax requests or DOM changes.