爲標籤的複選框單獨的CSS標記輸入

Question

我已經使用標籤與兩個輸入文本框：

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

和複選框/選項框

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

麻煩的我是怎麼做的我指定不同的CSS用於不同輸入類型的標籤。

如果我做一個通用的標籤，CSS：

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

我發現我不是結了不對齊複選框或嚴重定位文本框。

Answer 1

你可以添加類的標籤。例如：

<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"> 

然後在CSS中使用類值：

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

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

或者，如果你有投入後的標籤，你可以選擇這樣的：

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

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

Answer 2

你可以這樣寫你的CSS選擇器：

label[for=Username] 
label[for=Live] 

您也可以看看這個線程：
CSS Selector for selecting an element that comes BEFORE another element?

Answer 3

你可以寫這樣的CSS選擇器將工作：

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

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