Fancy Form Elements

Styling HTML Form Elements with jQuery

Styling HTML form elements was a challenge for some time but as jQuery came in the picture in recent years it became easy to style form elements in HTML.

We as web or UI or front-end developers might have struggled while working on HTML forms. When it comes to style each of the elements as per style guide.

Some of the HTML form elements are:

  • Input types such as text, radio, check-box etc…
  • Label
  • Fieldset
  • Button
  • Select dropdown
  • Textarea

We can give CSS styles to almost all elements except Radio buttons, Checkboxes & Select dropdowns. To style these elements we need to use javascript or jQuery or any scripting language which can be used to manipulate DOM elements.

There are lots of jQuery plug-ins available which are used to style these HTML form elements. Most of these plug-ins are replacing current HTML on-the-fly with other HTML tags and sometime hiding actual HTML and adds other HTML tags in effort to achieve styles and as per standard practice, we should not have repeated code.

I have developed one simple jQuery plug-in to style HTML form elements. It adds additional classes and very few more HTML tags but it does not replaces the actual HTML form elements. With this plug-in one can style Radio button, Checkboxes & Select Dropdowns.

Why use FancyFormElements plug-in?

It is very light weight and very easy to understand. You can pass your own class names on inputs to style the elements as you want.

How to Install?

To install FancyFormElements plugin, you just need to include jQuery.FancyFormElements.Plugin file in your project with one of the jQuery 1.7.1+ file. In your main .js file you need to call the fancyFormElements() function with the #FormId or .FormClass you want to apply the styling.

HTML Code:

<input type="radio" name="rd" id="rd-1" value="R1" class="rd" /&gt; <label for="rd-1">Radio 1</label>
<input id="chk-1" class="chk" name="chk1" type="checkbox" value="CHK1" /> <label for="chk-1">CheckBox 1</label><select id="select" class="select" name="select">
<option selected="selected" value="Select Any Option">Select Any Option</option>
<option value="Select_1">Select 1</option>
</select>

CSS Code:

label, select { cursor: pointer; }
.rd, .rd1 { background:url(../images/checkbox.png) 0 0 no-repeat; width:19px; height:19px; }
.chk, .chk1 { background:url(../images/chkbox_img.jpg) -15px 3px no-repeat; width:13px; height:15px; padding:3px 0 0 3px; }
.select, .select1, .option { background:url(../images/select_drop2.gif) 0 0 no-repeat; border:0; width:326px; height:25px; padding:0 5px; }

In above html code you can see the .rd class is assigned to the radio input and I gave background image in css for the same class. Same way you can give any class name to the radio/ checkbox / select dropdown and write css with background image which you want to display on page.

JavaScript Code:

fancyFormElements("#formId");

// OR

fancyFormElements(".formClass");

The plugin will catch the class from the input/ select tags and will use in script to style them.

View Demo

Defaults & Options

The default values and options are as below:

var defaults = {
    radio: true, // DEFAULT = true, OPTION = false, if you do not want to style radio button
    checkbox: true, // DEFAULT = true, OPTION = false, if you do not want to style checkbox
    dropdown: true // DEFAULT = true, OPTION = false, if you do not want to style dropdown
}

Web/ UI & Front-end developer based in Ahmedabad, GJ, India. Here to help/ discuss community to spread web awareness.

2 comments On Styling HTML Form Elements with jQuery

  • Great and helpful. But I am wondering if we can have custom dropdown bucket as well. Currently it is showing the default select dropdown bucket which we cannot overwrite with CSS.

    Thanks.

    • In Demo, you can see the dropdown is showing custom image for the <select> tag. I have tried to avoid code duplication by mirroring the dropdown in <ul> list. You can style the <option> tag with CSS.

Leave a reply:

Your email address will not be published.