Style your HTML Input Form Elements using CSS & JavaScript

Posted on April 12, 2009, under JavaScript,  Bookmark it

Do you want to change the default look of your form elements? Checkout the following scripts that will help you to do that! Some of the libraries used to stylish the inputs are JQuery and MooTools.

prettyCheckboxes is a script useful if you want to have a consistent look for the checkboxes and radio buttons of your forms. The usability of the inputs remain the same after you apply the new effect.

[Go to Project Page | View Demo]

fancyform

FancyForm is a powerful and flexible checkbox replacement script for your classical HTML Input Checkboxes and Radios.

A quick feature list:

  • Quick Setup (just 2 lines or markup are required)
  • Has extendibility (many customization options)
  • Degrades gracefully (forms are working on old browsers)

[Read more]

stylishcontrols

Tips and tricks for accessible stylish HTML controls is a tutorial that shows you how to create stylish form buttons, checkboxes and radio buttons. A simple PHP Helper Script is provided that automatically generates the code.

[Go to Project Page | View Demo]

Custom Form Elements is a UI library that enhances checkboxes, radio buttons, input file uploads, text inputs, textareas, selects, submits, resets & images.

Features include:

  • Modular and small in size
  • CSS Customizable
  • Unobstrusive
  • Maintains usability and accessibility of form elements
  • Supports custom events
  • Enable sliding doors CSS Technique for your text fields/textarea
  • Select all / Deselect all functionality to specified groups of checkboxes

[Go to Project Page | View Demo]

Do you wish to receive the latest updates as soon as they are posted? Get our RSS Feed or Subscribe to the Newsletter!

Get our RSS Feed!

One Reply to "Style your HTML Input Form Elements using CSS & JavaScript"

  1. [...] View post: Style your HTML Input Form Elements using CSS & JavaScript [...]

Leave a Reply


* = required fields

  (will not be published)


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: If you want to post CODE Snippets, please make them postable first!
(e.g. <br /> should be converted to &lt;br /&gt;)