html - Separate CSS for label checkbox to label input -

i have used label both input textboxes:

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

and checkboxes/radioboxes

<label for="live">system live</label> <input id="live" name="live" type="checkbox" value="false"> 

the trouble have how specify different css labels different input types.

if generic label css:

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

i find either end unaligned checkboxes or badly positioned textboxes.

you add classes labels. example:

<label for="username" class="textbox-label">username</label> <input id="username" type="text" value="">  <label for="live" class="checkbox-label">system live</label> <input id="live" name="live" type="checkbox" value="false"> 

then use class values in css:

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

alternatively, if had labels after inputs, select this:

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