Kiểu <label> dựa trên trạng thái của <input>

Question

Có thể, chỉ với CSS, để tạo kiểu cho nhãn HTML phụ thuộc vào trạng thái của đầu vào không?

Trong trường hợp của tôi, tôi muốn tạo kiểu <input type="checkbox"> dựa trên việc nó đã được kiểm tra hay chưa.

Tôi đã thử đặt nhãn bên trong đầu vào, nhưng Firefox và Chrome (ít nhất) dường như phân tích cú pháp chúng dưới dạng anh chị em, mặc dù chúng được lồng vào nhau rõ ràng trong nguồn đầu vào. Và tôi không biết cách viết một quy tắc CSS có thể gián tiếp thông qua một thuộc tính for =.

Tôi có cần phải đánh dấu Javascript trên trang này không?

Answer 1

Chúng không cần phải lồng nhau, đó là những gì thuộc tính "cho" nằm trong phần tử < nhãn >.

Trong trình duyệt hiện đại (những người ủng hộ CSS 2.1), bạn có thể sử dụng một selector anh chị em, như

input + label { 
    /* rules */ 
} 

Bạn sẽ cần phải có đánh dấu của bạn trong một mối quan hệ anh chị em nghiêm ngặt, chẳng hạn như:

<input name="cb" id="cb" type="checkbox"><label for="cb">Checkbox</label> 

Answer 2

Sử dụng liền kề/anh chị em chọn cộng với bộ chọn thuộc tính sẽ làm cho nó hoạt động:

<form> 
    <style> 
    INPUT[checked=checked] + LABEL { 
     color: #f00;  
    } 
    </style> 
    <div> 
     <input type="checkbox" id="chk1" /> 
     <label for="chk1">Label #1</label> 
    </div> 
    <div> 
     <input type="checkbox" id="chk2" checked="checked" /> 
     <label for="chk2">Label #2</label> 
    </div> 
</form>