Tag Archives: form skinning

Skinnable CSS3 Metro Forms

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

Say hi to AcidJs.Forms, the successor of one of the oldest components in Acid.JS Web.UI – Forms.JS!

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.

acidjs-forms

Key Features
  • Lightweight and imageless, fully CSS3-driven skins.
  • Fast initialization and small footprint.
  • CSS3 animations and transitions.
  • Support for themes.
  • Rich client API and custom events.
  • Support for multiple themes on a single page.
  • No additional markup required.
  • The full version is shipped with 5 ready to use themes (Default, Gray, Orange, Red and Violet).
  • Fallback for non-CSS3 browsers.

Check the info here, look at the demo and have fun!

CSS3 Metro Dropdown Styling

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

Here’s a quick and dirty CSS3 solution that will give cool metro look and feel to your HTML drop downs without a single line of JavaScript and minimal additional markup (actually just one wrapping <span />).

css3-metro-dropdown

You may also want to check AcidJs.Forms for a complete form-styling solution with CSS3 and JavaScript.

Enjoy the weekend!

Related Posts

Custom Crossbrowser Styling for Checkboxes and Radio Buttons

This solution is outdated. You can find the newest one on this page. Find more experiments here.

More Cool Stuff

The New Killer Version of Forms.JS Form Element Skinning Component is Out

Forms.JS is a powerful component that will give you total control over the form elements on your page without any additional markup or sophisticated JavaScript. All you have to do is to add a single line of JavaScript in the head section of your webpage, define which elements will be styled, specify skinning region, set a skin, reload the page and leave the rest to Forms.JS. The component will seamlessly add cool Web 2.0 looks to input boxes, buttons, file inputs, checkboxes, radiobuttons and dropdowns.

What’s New in the Latest Version

  • Automatic styling of dynamically added form elements in the specified region.
  • Just one image sprite per skin and extensive use of CSS3.
  • Faster and seamless initialization.
  • Optional CSS3 support for IE7 and IE8 via CSS3Pie.
  • Internet Explorer 9 ready.
  • Selectboxes animations.
  • Built on top of jQuery.
  • New set of skins.
  • Improved client API.
  • Support for for the size property of selectboxes (expanded dropdowns).
  • Platform-independable – PHP, .NET, JAVA, etc.
  • Multiple skins on a single page.
  • Additional markup not required – just your form elements.

Check out the demo? And maybe download? Forms.JS 4.0 is also available in the latest version of Acid.JS Web 2.0 Component Library.

Update for the Mac Skin of Forms.JS

There is an update for the Mac skin of Forms.JS available for download. If you are using VotingPoll.AJAX, ContactForm.JS or TourDates.AJAX, this update is for you as well. Click here to get it.

This update is not included in Acid.JS yet, but it will be in one of the upcoming updates.