Styling radio buttons

HTML & CSS
1

my radio buttons are displaying inline one after another and I’d like them to display as a vertical list. How can I achieve that using CSS only?

example html

<input type="radio" name="surveyField" value="" />Option1
<input type="radio" name="surveyField" value="" /> Option2

Thanks

2

I’d place a <br /> after each input. That’ll allow CSS to be off and still maintain the accessibility of the form (aka keep it still readable and very usable) :). There was a thread recent on this topic, and majority of the people here agreed with this.

3

Thanks for replying. Generally I don’t like to use <br /> in this situation, though I do know it is an easy solution. Using list tags and setting list-style-type: none; is also an option. But as I’m doing alot of styling on this particular form, I prefer to keep the markup separate so have gone for input[type=“checkbox”], might as well use the new selectors.

4

Why not? It’s the best option to use here. Otherwise you’ll be messing with some weird CSS.

Your option with lists involves you adding a lot of unsemantic markup, just to achieve what a <br> would.