Hey guys. Here’s another entry on jQuery that someone might find useful ; ) One of the common challenges we’ve had to address this week is coming up with purely div based versions of popular form elements such as selection boxes and radio buttons. These new components had to not just function as well as their standard form element counterparts, but also gracefully degrade back to them, adding a little bit of extra work into the pot.

CSS has come a long way and with the right techniques, yes, you can probably make a standard combobox look pretty decent. What if however you wanted to include images (such as a flag, icon or picture) next to your text? This isn’t supported out of the box and requires a little rethinking. In this post I’m going to show you how to create a cross-browser compatible color selector which relies on, but doesn’t display, simple radio buttons. It’s doesn’t require a huge amount of code but will teach you how to use the techniques we’ve implemented correctly.

How does the color selector work?

As we’re going to be displaying  a set of images in a particular arrangement, it’s always nice to start off with a list  of images, each beginning and ending with an <li></li> tag. Inside this we’re going to define a radio button with a value that will be submitted to our form processor.  This is an example of an entry on your initial list of images:

<li>
<div class=”spacer”> </div>
<input id=”colorSelect” type=”radio” name=”colorSelect” value=”pinks”/>
<img  src=”color/all.png” title=”Select Colour” />
<p>All colors</p>
<div class=”spacer”> </div>
</li>

What you’ll end up with is a page that contain elements resembling:

Our next step is to tell jQuery to hide the radio buttons but make it so that when you click on one of the colors, the underlying radio button is selected. As we’re essentially replacing the default radio button with an overlay (our color image) the same expected behavior should also be carried forward to some extent. When a user clicks on a color, the color should highlight. A user should only be able to select one color at a time, just like they would if they were using the standard radio form elements.

To hide all our radio elements we simply use:

$(‘div li input’).hide();

and to enable borders to display around a selected color image we use:

$(‘div.thumbs img’).click(function() {
$(‘div.thumbs img’).css(‘border’, offstyle);
$(this).css(‘border’, clickstyle);
});

where offstyle and clickstyle are simple CSS border definitions. There’s a little extra code involved to enable mouseovers but thats about it!.  I’ll be posting the code up here shortly.  Feel free to have a play around with it and enjoy!

Update:

jQuery Grid Color Selector 1.01 can be downloaded here

Demo:  try it here

Related posts:

1. Styling graphics into radio buttons with CSS We recently decided to look into styling some radio...
2. 7 Really Useful Tips For Better jQuery Code   I’ve been using jQuery in my web apps for...
3. How to create animated Skype-style buttons using jQuery  Hey guys. If you’re a frequent user of Skype I’m...
4. How to create a Facebook Friend Selector using jQuery and PHP or Grails (without FBML) When I first attempting to code up a pure PHP...
5. jQuery UI Animation Effects The jQuery UI Effects Core brings a few more...

Related posts brought to you by Yet Another Related Posts Plugin.