CSS Styling Input Radio Form Controls with Labels above buttons

CSS Styling Input Radio Form Controls with Labels above buttons

Hold on Cowboy

This blog post is pretty old. Be careful with the information you find in here. It's likely dead, dying, or wildly inaccurate.

I just wanted a nice way to style my radio buttons sort of inline, but with the labels above the radios. Here is how I accomplished this.

ul { overflow: auto; padding: 2px 0;}
ul li { float: left; text-align: center; margin: 0 10px}
ul label { display: block;}

Line one clear the floats after the UL. Line two floats the LI. Line three displays the label as a block.

The HTML

<ul>
	<li><label for="rtw0">Never</label>
<input id="rtw0" type="radio" name="ridetowork" value="0" /></li>
	<li><label for="rtw1">1</label>
<input id="rtw1" type="radio" name="ridetowork" value="1" /></li>
	<li><label for="rtw2">2</label>
<input id="rtw2" type="radio" name="ridetowork" value="2" /></li>
	<li><label for="rtw3">3</label>
<input id="rtw3" type="radio" name="ridetowork" value="3" /></li>
	<li><label for="rtw4">4</label>
<input id="rtw4" type="radio" name="ridetowork" value="4" /></li>
	<li><label for="rtw5">5</label>
<input id="rtw5" type="radio" name="ridetowork" value="5" /></li>
	<li><label for="rtw7">more than 5</label>
<input id="rtw7" type="radio" name="ridetowork" value="7" /></li>
</ul>

This will produce nicely formed radio buttons with labels on top. Screenshot.

screenshot.png