Featured Posts

Codeigniter Pagination Part 3 OK so we have now covered setting up Codeigniter Pagination and passing some simple data through it. We have also managed to add categories to our posts to make it a little...

Readmore

Codeigniter Pagination Part 2 So leading on from the last screencast we now have some simple data being pushed through the pagination library. Now were going to look at adding categorys to our posts...

Readmore

Codeigniter Pagination Part 1 One of the biggest things I see being asked around the codeigniter forums & IRC channel is pagination. So I have decided to create a set of tutorials from basic setup...

Readmore

Codeigniter Preparation Hopefully if I can keep my promise and will be rolling a set of screencast on this site and part of them will be to do with the Codeigniter Framework. I though it would...

Readmore

Radio Button Replacement With Style I thought I would kick off this blog with a short tutorial on how you can make form radio buttons look and feel allot more interesting. A recent job required the user to...

Readmore

Web Lee Rss

Radio Button Replacement With Style

Posted on : 30-05-2009 | In : CSS, Jquery

12

I thought I would kick off this blog with a short tutorial on how you can make form radio buttons look and feel allot more interesting.

A recent job required the user to select a radio button which then on form submit depending on the result would load a specific page. OK im hearing you a normal set of radio buttons would have done the job fine but it just looked so boring and took up so little space. So I decided that with a bit of CSS & Jquery magic we could make it look allot more interesting.

First lets start of with a normal form with a set of radion buttons.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fancy Checkbox</title>
</head>

<body>

<h2>Check an Option</h2>

<form action="step2.html" method="post" id="radioform">
Option 1: <input name="option1" type="radio" value="option1" id="option1" checked="checked" /><br />
Option 2: <input name="option1" type="radio" value="option2" id="option2" /><br />
Option 3: <input name="option1" type="radio" value="option3" id="option3" /><br />
Option 4: <input name="option1" type="radio" value="option5" id="option4" /><br />
</form>

</body>
</html>

Ok now we have our basic form we need to add our styled buttons and tick to show which radio button is active. I have provided in the download the PSD’s for this example but lets see the code. Below you can just see the HTML for the list elements but I have used used css sprites for the hover over / active states (basically one image for both states).

<div id="options">
<ul id="list">
<li class="active"><a href="#" class="option1 active" id="link1"><span>Option</span></a></li>
<li><a href="#" class="option2" id="link2"><span>Option</span></a></li>
<li><a href="#" class="option3" id="link3"><span>Option</span></a></li>
<li><a href="#" class="option4" id="link4"><span>Option</span></a></li>
</ul>
</div>

So now to the Javascript. We need to bind the click function to see which link we have clicked then update the checkbox and then update the list to reflect this action. We will use Jquery Selector Hierarchy (parent > child) method which looks like this.

$(document).ready(function () {
$("#list li > a").click(function (event) {
// Work starts here
});
});

So now we have a click event function which will trigger once we click on any of the list links. We will now need to remove all active elements as trying to add/remove from each one will create extra code.

$(document).ready(function () {

$("#list li > a").live('click', function (event) {
// First disable the normal link click
event.preventDefault();

// Remove all list and links active class.
$('#list > li, #list > li a').removeClass("active");
return false;
});
});

Ok thats working nicely but now the fun part. We need to grad the link clicked ID and then make the correct radio button to checked and update the CSS.

$(document).ready(function () {

$("#list li > a").live('click', function (event) {
// First disable the normal link click
event.preventDefault();

// Remove all list and links active class.
$('#list .active').removeClass("active");

// Grab the link clicks ID
var id = this.id;

// The id will now be something like "link1"
// Now we need to replace link with option (this is the ID's of the checkbox)
var newselect = id.replace('link', 'option');

// Make newselect the option selected.
$('#'+newselect).attr('checked', true);

// Now add active state to the link and list item
$(this).addClass("active").parent().addClass("active");

return false;
});

});

And that’s it !!. You now have with just a few lines of code a nice replacement for your radio buttons.

Hope you enjoyed it.

Comments (12)

Looks quite pleasant. With an additional parameter you could cover checkboxes, too!

Very nice work – with excellent tutorial ;)

However, what code do I put if I require more than one set of options on the same page =/

Nice…but it doesn’t degrade at all. What do you do about those people who need to fill out the form BUT don’t have JS on.

Truly all js solutions should degrade to be usable when JS is off.

Very nice, but it doesn’t appear to degrade gracefully when javascript is disabled. The buttons simply stop working when javascript is disabled. Do you have a fix or work around?

Hi Philip

Not going to disagree with you but in this day and age I truly don’t understand why you would have JS off. If you are building a UI for consumers these are going to be big standard PC’s not someone who is working for the goverment. -)

I think that what you have created is a great example of something I have been looking to accomplish for a while now… My only question (and it may be a simple one to others) but is there a way to translate this to check boxes so a form with check boxes and radio buttons can have the same or similar appearance?

Very useful and simple to learn. Just the way I like it! Thanks!

Hi!

This might be a stupid question. But I´m having a hard time to pass a value from the form
form action=”welcome.php” method=”get”

What am I missing?

Thanx
Nicke

Thank you, that has me very helped.

I really like the look and feel of these radio buttons. I also agree with Lee about the JavaScript. Assuming someone has JavaScript turned is like trying to make sure that your web page runs on IE 1. :)

There are still some people out there who are turning their js off. The best practice is gracefull degradation (where the content is degrading in a manner that it is atleast visible – but not necessary visually spectacular)

I found a nice little js script that checks what os and browser you are on. It also checks if js is on:

http://rafael.adm.br/css_browser_selector/

You can then simply toggle the display on and off in css – in correspondence with the things you want to show in with js and without js working.

This will look something like this in css (if you use the same id’s as posted above):

#list{
display: none;
}

#radioform{
display: block;
}

/*works only when js is enabled */
.js #list{
display: block;
}

.js #radioform{
display: none;
}

So without js the beautifull list buttons are removed from the display list and it shows only the original radiobuttons.
When js is on it will show the beautifull buttons as we want it and remove the radiobuttons from the displaylist.

I hope this tackles the issue that Philip experienced. Atleast users who have js turned off can fill in the form now.

Don’t forget to save the js script in your js directory and put a script tag in your HTML, else it will do nothing. This sounds obvious, but it happened to me sadly.

Write a comment