We help IT Professionals succeed at work.

CSS Radio Button Problem

Elxn asked
I am using the css for fancy radio buttons found here on dynamic drive.

I've got the code inside a pop up box that is a jQuery plugin.  As far as I know this plugin isn't the problem.

Right now the radio buttons appear just fine, but you cannot "check" them.  If you hard code checked="checked" into the radio button the checked circle shows up, but you can't uncheck that radio button.

To see the problem go to this page:   page
Then hover over the broken image (probably not showing) and you'll see a button that says "Wrong Category."
Click the wrong category button
Up will come the box with the HTML and CSS.

So any ideas as to how i can get the radio buttons working like they are on Dynamic Drive?

Thanks for the help!
Watch Question

Top Expert 2013

>>>As far as I know this plugin isn't the problem.

The probability that the problem is a conflict with the plugin is about 90%.  Plugins like that have very little respect for the snippets like what you are using.  Try using the code without the plugin.  If it works then there is a conflict.  If there is a conflict then you are going to have to go through the plugin code to fine where it is damaging the integrity of the radio code.

Top Expert 2015

I don't see font-awesome loaded anywhere on that page. You should have this or something equivalent in the head of the page.
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);

Open in new window

The plugin uses font-awesome for the dots and check marks for their radio and checkbox controls. I know that because the plugin page you cited says this:
Note: The check mark seen inside the checkbox replacement is a CSS icon font from Font Awesome. We specify the unicode of the desired font symbol inside our CSS to show it



It does say that for the check mark for the checkbox, but I didn't see it say anything about the radio buttons.  I also get the blue dot to show up inside the outer blue dot when i hard code check="checked" into the radio button.  Its there now you should be able to see it.  

That said I'm assuming since it shows with the hard code that I have everything I need.

I'll try to see if the plugin is really the problem, but any further help would be appreciated!

Well the problem was not with the plugin and it seems the HTML was a bit off, I didn't copy it exactly and I thought I didn't have to include a for attribute.  But when I did copy it exactly it worked just fine.

Thanks for the help.


The problem was with the HTML and I don't think anyone said this was the issue so I'm choosing this as the solution.