Putting css borders around radio buttons

Question

I\'m trying to get a garish red border around some radio buttons, but it is not showing up in Firefox latest or Chrome latest. Work fine in IE9/IE8.

Each of the inp

Answer 1

Try this...

Put a div around the input and assign a class to the div like so:

Then open your custom css file and add this CSS

.custom {border: 1px solid red; border-radius: 30px; padding: 3px 3px 0 3px; background: red;}

This should create a nice red border around the radio button. If you're using a check box you would simply remove the border-radius: 30px from the css. Depending you may need to play with the padding a bit to center the button, but this worked for me.

Edit: You will also want to assign the following CSS to the div so it lines up correctly.

.custom {display: inline;}

fiddle link