Separate CSS for label checkbox to label input

Question

I have used label for with both input textboxes:

<label for="Username">Username</label>
<input id="Username"  type="text" value="">

and checkboxes/radioboxes

<label for="Live">System is Live</label>
<input id="Live" name="Live" type="checkbox" value="false">

The trouble I have is how do I specify different css for the labels for different input types.

If I do a generic label css:

label {
    color: #00a8c3;
    line-height: 20px;
    padding: 2px;
    display: block;
    float: left;
    width: 160px;
}

I find I either end up with unaligned checkboxes or badly positioned textboxes.

Answer 1

You could add classes to the labels. For example:

<label for="Username" class="textbox-label">Username</label>
<input id="Username" type="text" value="">

<label for="Live" class="checkbox-label">System is Live</label>
<input id="Live" name="Live" type="checkbox" value="false">

Then use the class values in CSS:

label.textbox-label {
 /*some styles here*/
}

label.checkbox-label {
 /*some styles here*/
}

Alternatively, if you had the labels after the inputs, you could select like this:

input[type="text"] + label { 
  /*some styles here*/
}

input[type="checkbox"] + label { 
  /*some styles here*/
}

Answer 2

You could write css selector like this will work:

label[for=Username]{ /* ...definitions here... / } 

label[for=Live] { / ...definitions here... */ }