How do I (by default) style different types of labels differently?

Question

In my forms, I want to make HTML labels bold in general, but not bold when they are labelling radio buttons and checkboxes.

How can I do that in a CSS that can be imported and works by default, without requiring local overrides of the styling?

Example Radio Label (should not be bold)

<label for="banana">
<input type="radio" name="banana" id="banana" value="banana" />Banana
</label>

Example non-Radio Label (should be bold)

<label for="id">ID</label>
<input type="text" size="12" id="id" name="id" />

The way I'm associating labels can be changed if it helps.

Thanks!

Answer 1

You could add a class to the labels for radio buttons, and then style them differently.

<label for="banana" class="radio">

Then the CSS could by default make labels bold, and then override it for the radio ones to make them normal.

label { font-weight: bold }
label.radio { font-weight: normal; }

Answer 2

You can't do that without giving the right labels a class or by using Javascript. With jQuery selectors you could do that:

$("label:not(:has(radio))").addClass("boldmenow");
...
.boldmenow {
  font-weight: bold;
}

Answer 3

Basically, you can't because IE doesn't support it (so use a class instead) but if IE worked properly and CSS3 was well supported you could use a general sibling selector like so:

input[type="radio"]~label {font-weight: bold;}

note that IE doesn't really support the attribute selector there either.

Answer 4

If you extend the markup to the following:

<label for="banana">
    <input type="radio" name="banana" id="banana" value="banana" /><span>Banana</span>
</label>

Then you could use this CSS:

label {
    font-weight: bold;
}
label span {
    font-weight: normal;
}

Answer 5

The short answer is you can't, reliably. If you're trying to make it work in a number of commonly used browsers such as IE6, 7, Firefox etc you'd have to rely on JavaScript rather than CSS to identify elements within your document that fit your rules for styling and apply a class to each one of those elements.

For cross-browser compatibility, you'd need to wrap arrayed field labels in a classifying element or apply classes to the labels to separate them from normal labels.

What I would do here is wrap the list of radio options in an (un)ordered list (for semantic meaning), and normal text fields in a single paragraph.

E.g. Normal Name:Value pair:

<div class="form_row">
  <label for="txtFirstName">First Name</label>
  <p>
    <input type="text" class="text" name="firstName" id="txtFirstName" />
  </p>
</div>

And then for a Name:Array pair:

<div class="form_row">
  <label>Gender</label>
  <ul>
    <li><label for="rdoGenderMale"><input type="radio" class="radio" name="gender" id="rdoGenderMale" value="male" />&nbsp;Male</label></li>
    <li><label for="rdoGenderFemale"><input type="radio" class="radio" name="gender" id="rdoGenderFemale" value="female" />&nbsp;Female</label></li>
  </ul>
</div>

Now to style it appropriately, you write your normal rules for Name labels:

div.form_row label {font-weight:bold;}
div.form_row ul {list-style:none;}
  div.form_row ul label {font-weight:normal;}

hth, ndorfin