Showing posts with label custom radio button. Show all posts
Showing posts with label custom radio button. Show all posts

Sunday, April 10, 2011

Custom radio button/checkbox - jQuery


Hi,

This can be considered as a continuiton of my previous post for creating custom dropdown using jQuery. In web 2.0 it becomes important to get rid of the conventional flat looking radio buttons and check box with stylish images but keeping their functionality. In this post I have made a custom solution for achieving that. Click here to download the entire source code.

I am using 2 pair of images. 1 pair for selected/unselected radio buttons and other checked/unchecked check boxes. First lets take a look how it looks:


Explanation:
First download the source code. All the trick is in the script.js file. You just need to follow few conventions given below for defining a radio button or a checkbox:

Radio button:
Conventionally this is what we write: