ラベルをクリックしても入力フィールドがチェックされない

Question

次のコードを使用しています。チェックボックスは、私が与えたスタイルでチェックされたくありません。

<div class="form-group"> 
    <div class="col-md-6 col-md-offset-4"> 
     <div class="checkbox"> 
      <input name="remember" type="checkbox" ><label>Wachtwoord onthouden</label> 
     </div> 
    </div> 
</div>' 

とCSS：

col-md-4.control-label, #email, #password { 
    margin: 20px auto; 
    width: 300px; 
    resize: none; 
    font-family: 'Exo 2', sans-serif; 
    font-size: 1em; 
    outline: none; 

} 

.btn.btn-link, .checkbox { 
    display: block; 
    margin-top:20px; 
    margin-bottom:20px; 
    color: $white; 
} 

[type="checkbox"]:not(:checked), 
[type="checkbox"]:checked { 
    position: absolute; 
    left: -9999px; 
} 
[type="checkbox"]:not(:checked) + label, 
[type="checkbox"]:checked + label { 
    position: relative; 
    padding-left: 25px; 
    cursor: pointer; 
} 

/* checkbox aspect */ 
[type="checkbox"]:not(:checked) + label:before, 
[type="checkbox"]:checked + label:before { 
    content: ''; 
    position: absolute; 
    left:0; top: 2px; 
    width: 17px; height: 17px; 
    border: 1px solid #aaa; 
    background: #f8f8f8; 
    border-radius: 3px; 
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3) 
} 

/* checked mark aspect */ 
[type="checkbox"]:not(:checked) + label:after, 
[type="checkbox"]:checked + label:after { 
    content: '✔'; 
    position: absolute; 
    top: 3px; left: 4px; 
    font-size: 18px; 
    line-height: 0.8; 
    color: $background_color_green; 
    transition: all .2s; 
} 

/* checked mark aspect changes */ 
[type="checkbox"]:not(:checked) + label:after { 
    opacity: 0; 
    transform: scale(0); 
} 

[type="checkbox"]:checked + label:after { 
    opacity: 1; 
    transform: scale(1); 
} 

私はウェブサイト上でいくつかの他の部分はまったく同じスタイルを使用するので、それはかなり奇妙だが、それはそこに働くありません。それはこの部分の両方の部分で正しく動作するはずですか？

Answer 1

正しい入力にラベルを割り当てる必要があります。そのため、for属性を使用するか、ラベルを入力の周りに置いてください（ただし、現在のCSSコードは壊れます）。

次のHTMLは、望ましい結果をもたらすはずです。