Hộp kiểm CSS và nút radio khi đầu vào nằm trong nhãn?

Question

Tôi đã tìm kiếm rộng rãi ở đây để có câu trả lời cho điều này nhưng không hoàn toàn bắt gặp những gì tôi đang tìm kiếm. Tìm thấy điều này CSS - How to Style a Selected Radio Buttons Label? nhưng câu trả lời liên quan đến việc thay đổi đánh dấu, và đó là điều tôi muốn tránh mà tôi sẽ giải thích dưới đây.

Tôi đang cố gắng để thêm các hộp kiểm tùy chỉnh css3 và nút radio để chủ đề diễn đàn XenForo tôi, và tất cả các hướng dẫn Tôi đã đọc về vấn đề này có nhãn sau khi đầu vào:

<input type="checkbox" id="c1" name="cc" /> 
<label for="c1">Check Box 1</label> 

Tuy nhiên trong đánh dấu XenForo của đầu vào nằm bên trong nhãn:

<label for="ctrl_enable_rte"> 
<input type="checkbox" name="enable_rte" value="1" id="ctrl_enable_rte" {xen:checked "{$visitor.enable_rte}"} /> 
{xen:phrase use_rich_text_editor_to_create_and_edit_messages} 
</label> 

Tôi đã tìm hiểu lý do tại sao, nhưng không tìm thấy bất kỳ điều gì liên quan đến hộp kiểm css tùy chỉnh/nút radio khi đánh dấu theo cách này. Tôi muốn tránh phải thay đổi đánh dấu, bởi vì tôi đang xử lý hệ thống diễn đàn ở đây, và điều đó sẽ liên quan đến việc chỉnh sửa một loạt các mẫu lõi ... mà tôi phải cập nhật đánh dấu trên mỗi lần phần mềm diễn đàn đưa ra một bản cập nhật (giả sử các mẫu đã thay đổi).

Tôi đã cố gắng tạo các quy tắc CSS có thể hoạt động với loại đánh dấu này, nhưng cho đến nay tôi đã không thành công. Tôi không quá kinh nghiệm với CSS, không có mọi selector được ghi nhớ, và các lớp giả vẫn còn khá xa lạ với tôi, vì vậy tôi hy vọng một ai đó ở đây có thể làm sáng tỏ nếu điều này có thể, và nếu có, làm thế nào tôi có thể đi về nó. Tôi đã có sẵn sprite của mình, tôi chỉ cần tìm ra CSS.

Vấn đề chính của tôi là tôi không thể tìm ra cách chọn nhãn (chỉ các nhãn liên quan đến các yếu tố đầu vào này). Thông thường một cái gì đó như

input[type="checkbox"] + label 

được sử dụng, nhưng khi nhãn không theo sau đầu vào và thay vào đó ra ngoài/trước nó ... làm cách nào để chọn?

Answer 1

Thật không may CSS không cho phép phong cách của các yếu tố cha mẹ dựa trên yếu tố con đó sẽ là một cách dễ dàng dụ:

div.a < div { border: solid 3px red; } 

Điều ngược lại lựa chọn một con dựa vào cha mẹ:

div.a > div { border: solid 3px red; } 

Những gì bạn muốn làm có thể đạt được bằng cách sử dụng jQuery.

Khám phá this bài đăng.

Answer 2

Câu hỏi rất thú vị. Sự thật được nói, tôi khá chắc chắn đó là không thể chỉ với CSS một mình.

Nếu có một số loại mẫu cho nhãn cho thuộc tính (ctrl_enable_rte), có hy vọng cho bạn. Ví dụ, nếu tất cả các nhãn hộp kết thúc với rte, bạn có thể sử dụng

label[for$=rte] { ... } 

Nếu không có mô hình như vậy, và các ID hộp kiểm được chọn tùy ý, bạn sẽ phải dùng đến JavaScript.

Answer 3

Nếu bạn có thể chỉnh sửa đánh dấu để bọc các văn bản nhãn thực tế, ví dụ:

<label> 
    <input type="checkbox"> 
    <span>One</span> 
</label> 
<label> 
    <input type="checkbox"> 
    <span>Two</span> 
</label> 
<label> 
    <input type="checkbox" disabled> 
    <span>Three</span> 
</label> 

Bạn có thể kéo giảm một số thủ thuật với CSS:

label { 
    position:relative; 
    cursor:pointer; 
} 
label [type="checkbox"] { 
    display:none; /* use your custom sprites instead as background on the span */ 
} 
[type="checkbox"] + span { 
    display:inline-block; 
    padding:1em; 
} 
:checked + span { 
    background:#0f0; 
} 
[type="checkbox"][disabled] + span { 
    background:#f00; 
}​ 

Demo: http://jsfiddle.net/dMhDM/1/

Hãy nhớ rằng điều này sẽ thất bại nếu trình duyệt không hỗ trợ :checked.

Điều này về cơ bản giống như giải pháp khác, nhưng việc làm dao được thực hiện trên nhịp thay vì nhãn.