子divに基づくスタイリングラベル

Question

CSSを使用して入力をチェックするかどうかに基づいてラベルをスタイルすることは可能ですか、またはJavaScriptを使用してスタックしていますか？ために

<label class="filterButton"> <input name="RunandDrive" type="checkbox" value="1"> </label> 

Answer 1

あなたがチェックボックスをチェックするために枯れ:checked擬似要素を使用することができますチェックしたりされていません。これは、ラジオボタンとチェックボックスで機能します。

問題は、要素の親を選択したいが、実際にはcssに親セレクタがないことです。回避策は、入力要素の後（または前）にlabel要素を置き、適切なセレクタを使用することです。この場合、input要素の後にlabel要素を置き、+セレクタを使用します。

input[type=checkbox]+label { 
 
    background-color: green; 
 
} 
 

 
input[type=checkbox]:checked+label { 
 
    background-color: red; 
 
}

<input type="checkbox" id="ossm" name="ossm"> 
 
<label for="ossm">Click to turn RED!</label>

しかし、あなたが本当にlabel要素の子として入力要素を持っている必要があります場合は、[はい、あなたはJavaScriptに固執する必要があります。

Answer 2

スタイルのラベルへの最初のあなたは、このチェックボックス入力用のラベルをGUIDにこのコードをfor="qid"を入力し、「チェックボックス」id="qid"ためのIDを設定し、ラベルに配置する必要があり、すべてのチェックボックスを「確認」して

すべてです。

input[type=checkbox] + label { 
 
    color: #ccc; 
 
    font-style: italic; 
 
} 
 
input[type=checkbox]:checked + label { 
 
    color: #f00; 
 
    font-style: normal; 
 
}

<input name="RunandDrive" type="checkbox" value="1" id="qid"> 
 
<label class="filterButton" for="qid"> Thsis will be styled</label>