チェックボックスがチェックされている場合はラベルの色を変更し、チェックボックスがチェックされていない場合は赤色に変更します。

Question

ネイティブhtmlチェックボックスをスタイルするのは難しいのでカスタムチェックボックスを作成しようとしています。ラベルをクリックするとチェックボックスがオンになりますが、チェックボックスをオンにしてチェックを外すとラベルの境界線の色が変わります。任意のヘルプ、アイデア、提案、推奨事項は非常に高く評価されます。

input[type="checkbox"]{display:none;} 
 
label{ 
 
    border:1px solid red; 
 
    width: 15px; 
 
    height:15px; 
 
    display:block; 
 
} 
 
label + input:checked{ 
 
    border-color: blue; 
 
}

<div> 
 
    <label> 
 
    <input type="checkbox"> 
 
    </label> 
 
</div>

Answer 1

親セレクタが存在しないとしてあなたは（JavaScriptをせずに）その階層でやりたいことはできません。

私が見

input[type="checkbox"] { 
 
    display: none; 
 
} 
 

 
label { 
 
    border: 1px solid red; 
 
    width: 15px; 
 
    height: 15px; 
 
    display: block; 
 
} 
 

 
input:checked + label{ 
 
    border-color: blue; 
 
}

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