Skinning HTML form elements

It’s always a pain to skin the normal radio/checkboxes and the select lists by using CSS.
I was doing some research on this and figured out a way using javascript/css. I put the functions together in a small jquery plugin.

My idea was to customize the radio/checkbox/listboxes without disturbing the actual markup.
The solution makes use of real radio buttons with labels and their toggle functionality and skinned list-items, allowing radiobutton list rendering and easy skinning.

In the above form thre are a few dropdown lists, radio button and checkboxes. The markup looks like

 <fieldset class="Dropdown">
	<select class="NonJsSelect">
	 <option>List Item 1</option>
	 <option>List Item 2</option>
	 <option>List Item 3</option>
	 <option>List Item 4</option>
	 <option>List Item 5</option>
	 <option>List Item 6</option>
	 <option>List Item 7</option>
	 <option>List Item 8</option>
	 <option>List Item 9</option>
	 <option>List Item 10</option>
	 <option>List Item 11</option>
	</select>
 </fieldset>
 <p><strong>Checkbox controls</strong></p>
 <fieldset class="CheckList">
 	<input type="checkbox" id="CheckBox1" class="Checkbox" />
 	<label for="CheckBox1">Checklist 1 value </label>
 </fieldset>
 <fieldset class="CheckList">
 	<input type="checkbox" id="CheckBox2" class="Checkbox" />
 	<label for="CheckBox2">Checklist 2 value </label>
 </fieldset>
 <fieldset class="CheckList">
 	<input type="checkbox" id="CheckBox3" class="Checkbox" />
 	<label for="CheckBox3">Checklist 3 value </label>
 </fieldset>

Just wrap your controls in a <fieldset> or a <div> and add css classes “Dropdown” for comboboxes and “CheckList” for radio/checkbox controls as shown above.

Download the css/javascript files then add the javascript javascript css references to the page.

Finally just initiate the javascript function

<script type="text/javascript">
$.function(){
 $("select").AddSkin();
 $(".Checkbox").AddSkin();
//you can reference the controls by its name, id or css class just like any other jquery calls.
}
</script>

You can change the skin by editing the CustomControls.css and replacing the images.

here’s an example

Try it out!

You can download the sample code and plugin from here.

Note: The plugin currently supports only Dropdown, checkbox and radio button controls.
I order to make this work you have to include the latest jquery library.