We help IT Professionals succeed at work.

CSS Radio Button Problem

Elxn
Elxn asked
on
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!
Comment
Watch Question

Top Expert 2013

Commented:
>>>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.

Cd&
Top Expert 2015

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

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
Elxnboss

Author

Commented:
Beck,

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!

Thanks.
boss
Commented:
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.
Elxnboss

Author

Commented:
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.