CSS riêng biệt cho hộp nhãn dán nhãn đầu vào

Question

Tôi đã sử dụng nhãn cho với cả hai textbox đầu vào:

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

và hộp kiểm/radioboxes

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

Vấn đề tôi có được làm thế nào để xác định css khác nhau cho các nhãn cho các loại đầu vào khác nhau.

Nếu tôi làm một nhãn css chung:

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

Tôi tìm thấy tôi hoặc là kết thúc với hộp kiểm unaligned hoặc textbox nặng vị trí.

Answer 1

Bạn có thể thêm lớp học để các nhãn. Ví dụ:

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

Sau đó sử dụng các giá trị lớp trong CSS:

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

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

Ngoài ra, nếu bạn có các nhãn sau khi đầu vào, bạn có thể chọn như thế này:

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

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

Answer 2

Bạn có thể viết selector css của bạn như thế này:

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

Bạn cũng có thể có một cái nhìn tại thread này:
CSS Selector for selecting an element that comes BEFORE another element?

Answer 3

Bạn có thể viết bộ chọn css như thế này sẽ hoạt động:

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

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