Styling radio buttons in forms with css

Get Started
1

hello, :slight_smile:

haven’t coded radio buttons on forms for a while & am having trouble aligning the radio buttons, it is probably
something very simple. Thanks & much appreciated

HTML


<p class="label">Do you have a deadline?</p>
<label class="radio_label"><input name="less 2months" type="radio" value="less 2months"/>Less than 2 months</label>
<label class="radio_label"><input name="2-6months" type="radio" value="2-6months"/>2 - 6 months</label>
<label class="radio_label"><input name="more 6months" type="radio" value="more 6months"/>More than 6 months</label>
<label class="radio_label"><input name="not an issue" type="radio" value="not an issue"/>Time is not an issue</label>

CSS


#contact p, label {font: 1.5em "Brie Light";}
#contact {margin-left: 75px; padding-top: 85px;}
#contact label {display: inline; float: left; height: 0; line-height: 26px; 	width: 500px; font-size: 1.5em;
                      -moz-border-radius:5px; 	-webkit-border-radius:5px;}
#contact label.radio_label {color:#666; font-size:1.5em; font-family:"Brie Light"; margin: 15px; clear:both; 	width:auto;}
2

Can´t see the image, will wait for aproval before giving any suggestion!

3

I will suggest that the p called “label” be replaced with the legend of a fieldset, simply because a p is not a form control and you magically get better accessibility with the switch to a legend from a p.

When I write labels wrapping inputs, I put a space between the end of the input and the beginning of the label text, so I mean:


<label [b]for="less2months"[/b]><input [b]id="less 2months"[/b] name="less 2months" type="radio" value="less 2months"/[color=red]> [/color]Less than 2 months</label>

Note that wrapping inputs in labels, while perfectly legal, still causes enough hiccups in some Accessibility Technology (and also a strange intermittent issue in Safari on OSX) that many people avoid this setup, even though it gives you “blocks” (the labels) for styling and positioning without needing to add divs or something.

I’d also be wary of setting the height of the labels to 0. That sounds kinda scary.

Anyway if the label and the input were both inlines, or inline-blocks, they could both be given “vertical-align: middle” (or top or bottom or whatever) that helps them line up the same (IE won’t necessarily cooperate). Or, since you’ve set a line-height on the label, you could explicitly give that same line-height to the input too… I notice if I set line-heights globally, inputs still seemed to turn to the browser’s styling instead. I’ve started always setting explicit line-heights on my inputs now too.

Either of those two things (or both) may automatically help any alignment issues, since those are pretty common in forms.

Also, while we harp on not using tags for “presentation” in favour of CSS, if you decide you don’t feel safe relying on CSS to give the user knowledge of which label goes with which input (a usability issue), you could use <br> tags after each label-input pair. I have done that, and they can be overridden themselves with CSS. This would only be where the break conveys meaning by showing explicit grouping of elements (similar to why we use <em> and <strong> instead of just styling <span>s, even though no machine we know of actually knows what <em> and <strong> actually mean, so they’re just semantics for semantics-sake anyway).

4

Attachments approved :slight_smile:

5

If you separate the labels and inputs as Mallory mentioned above then you can set the label to display:inline-block and then apply padding/widths consistently to achieve the look you want.

Something roughly like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.formtest {
	width:350px;
	margin:auto;
	padding:40px 0 0;
	position:relative;
}
.formtest fieldset { margin:0 0 10px; }
.formtest input { vertical-align:middle; }
.gender label {
	text-align:left;
	display:inline-block;
	vertical-align:middle;
	padding:0 0 0 100px;
}
</style>
</head>
<body>
<form  class="formtest" id="formtabs" method="post" action="">
		<fieldset class="gender">
				<legend>Enter Gender</legend>
				<input type="radio" name="radio" id="rad1" value="male" />
				<label for="rad1">Male</label>
				<br />
				<input type="radio" name="radio" id="rad2" value="female" />
				<label for="rad2">Female</label>
				<br />
				<input type="radio" name="radio" id="rad3" value="notsure" />
				<label for="rad3">Not sure</label>
				<br />
		</fieldset>
</form>
</body>
</html>