変更する]チェックボックスのラベルのCSSプロパティが

Question

をチェックし、私は次のHTML持っている：CSSで

<label> 
    <input type="checkbox" value="cb_val" name="cb_name"> 
    my checkbox text 
    </label> 

を私は<label>タグに背景色を追加しました。

label { background-color:#333; color:#FFF; } 

このチェックボックスをオンにすると、ラベルの背景色を変更したかったのです。 私はjavascriptでそれを行う方法を知っていますが、CSSを使用する方法はありますか？

私はいくつかの解決策を見ましたが、隣接する兄弟セレクタを使用し、チェックボックスの後にラベルが表示されたときにのみ機能します。

私はまだjavascriptなしでこれを修正したいと思いますが、誰かが手がかりを持っていますか？

UPDATE：

私が恐れていたとして、それはこの方法を行うことはできませんので、私はJSでそれを行う、あるいは異なるHTML構造と同じ視覚効果を実現しなければなりません。 ラベルの背景色とテキストボックスを一度に設定したいので、ラベルの上にチェックボックスが絶対的に置かれたソリューションを利用できます。良い点PlantTheldea！

または、ラベルとチェックボックスの両方に背景色を適用できます。

ありがとうございました！

Answer 1

あなたは

label { background-color:#333; color:#FFF; } 

input[type="checkbox"]:checked + label { 
    background: brown; 
} 

JSFIDDLE

覚えておいて、このCSSで

<input type="checkbox" id="cb_1" value="cb_val" name="cb_name"> 
<label for="cb_1"> 
    my checkbox text 
</label> 

、そのような純粋なCSSでこれを達成することができます

ラベルにありチェックボックオフの後にいるあなたが持っていたのと同じ外観を保つために、より多くの周りにそれをスタイルする必要があります。

ここでは、希望通りの外観になるようにスタイリングするオプションがあります（New fiddle）。これは何かを絶対的なものに位置づけることを含まず、ちょっとしたトリッキーなものです。

Answer 2

ラベルがチェックされているときに、ラベルのみを直接スタイルすることはできませんが、チェックボックスの兄弟をスタイルできます。

http://jsfiddle.net/QdDpL/

HTML

<label> 
    <input class="check" type="checkbox" /> 
    <span class="label-text">Checkbox</label> 
</label> 

CSS

label { 
    background: yellow; 
} 
label .label-text { 
    background: cyan; 
} 
label input.check:checked + .label-text { 
    background: lime; 
} 

それは.label-の中にあったかのようにまた、チェックボックスが表示されるようする山車とパディングをいじることができるかもしれテキストスパン。

兄弟セレクタにブラウザのサポートについては、以下のリンクを参照してください： http://caniuse.com/css-sel2

代わりに別の答えは、あなたはそれがチェックボックスの兄弟である場合にラベルのスタイルを設定することができ、言ったように - まだだろうが、その後、ちょうど私の答えのようにラベルにチェックボックスは含まれません。