Comments on: Radio Button Replacement With Style

By: J.T.

J.T. — Wed, 04 May 2011 10:24:34 +0000

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.

By: J.T.

J.T. — Wed, 04 May 2011 10:05:25 +0000

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.

By: Larry

Larry — Thu, 02 Dec 2010 20:40:12 +0000

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.

By: SEO

SEO — Wed, 20 Oct 2010 11:15:37 +0000

Thank you, that has me very helped.

By: nicke

nicke — Tue, 14 Sep 2010 10:00:26 +0000

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

By: Yahzee

Yahzee — Wed, 02 Jun 2010 22:48:52 +0000

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

By: Curt

Curt — Fri, 26 Mar 2010 00:53:15 +0000

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?

By: Lee

Lee — Wed, 03 Feb 2010 17:12:25 +0000

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. -)

By: tarek

tarek — Wed, 11 Nov 2009 21:28:53 +0000

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?

By: Philip

Philip — Fri, 06 Nov 2009 01:17:11 +0000

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.