I can't seem to get the CSS to modify my radio buttons. Their default settings aren't symmetrical so my layout looks a little ugly. I am generating a bunch of these forms with javascript. I do not want to inject large amounts of inline style='margin:0px padding:0px' stuff but it's the only way I can get it to work.

I can't seem to get the CSS to modify my radio buttons. Their default settings aren't symmetrical so my layout looks a little ugly. I am generating a bunch of these forms with javascript. I do not want to inject large amounts of inline style='margin:0px padding:0px' stuff but it's the only way I can get it to work.

• javascript
• html
• css

• Show some code or an example. If you can get what you want with inline style attributes, you should be able to do it with a stylesheet. – John Flatness Commented Sep 25, 2011 at 2:15
• I knew somebody would know the answer without any pictures :-) – Steven Lu Commented Sep 25, 2011 at 2:17

1 Answer 1

Using a CSS selector, you can probably do this:

input[type=radio] { margin: 0; padding: 0; }

Note however that older versions of IE don't support attribute selectors. For those, you can do:

<div class="radios">
   ...input tags...
</div>

and

.radios input { margin: 0; padding: 0; }

to catch the oldies. This would cut down the amount of presentational code while maintaining patibility with ie6.