當輸入位於標籤內時，CSS複選框和單選按鈕？

Question

我在這裏搜索了廣泛的答案，但還沒有完全找到我要找的東西。發現這CSS - How to Style a Selected Radio Buttons Label?但答案涉及改變標記，這是我想避免的，我將在下面解釋。

我想定製CSS3複選框和單選按鈕添加到我的XenForo論壇的主題，而我已經對這個閱讀教程有輸入後標籤：

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

然而，在XenForo的標記輸入是標籤內：

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

我看着這是爲什麼，但是當標記是這樣沒有發現任何相關的自定義CSS複選框/單選按鈕。我想避免改變標記，因爲我正在處理一個論壇系統，這將涉及編輯一堆核心模板......我必須在每次論壇軟件時更新標記推出更新（假定模板已更改）。

我試着創建可以使用這種類型的標記的CSS規則，但到目前爲止，我一直不成功。我對CSS不太熟悉，沒有記住每一個選擇器，僞類對我來說仍然是非常陌生的，所以我希望這裏有人能夠闡明如果這是可能的，如果是的話，我如何可能會去做。我已經準備好了我的精靈，我只需要找出CSS。

我的主要問題是我無法弄清楚如何選擇標籤（當然只涉及這些輸入的標籤）。通常像

input[type="checkbox"] + label 

被使用，但是當標籤是不是輸入後，而是外前的/它...我該如何選擇呢？

Answer 1

不幸的是CSS不允許基於子元素的父元素的造型這將是最簡單的方法例如：

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

選擇孩子的基於父相反：

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

你想要做的事情可以使用jQuery來實現。

退房this後。

Answer 2

非常有趣的問題。真相被告知，我非常肯定，僅靠CSS就不可能。

如果標籤的屬性存在某種模式（ctrl_enable_rte），那麼對您有希望。例如，如果所有複選框標籤與rte結束，你可以使用

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

如果不存在這樣的模式，並且該複選框的ID是任意選擇，你必須訴諸的JavaScript。

Answer 3

如果您可以編輯標記來包裝實際的標籤字符，例如：

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

你可以拉過一些技巧與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; 
}​ 

演示：http://jsfiddle.net/dMhDM/1/

請記住，如果瀏覽器不支持:checked，這將失敗。

這與其他解決方案基本相同，但是在跨度而不是標籤上完成了定位。