angularjsのチェックボックスをオーバーライドするのに問題がある

Question

angular.jsのチェックボックスcssをオーバーライドしようとしています。通常のjavascriptコードで正常に動作します。

Plunker：https://plnkr.co/edit/gkWm0lgEZ7N88TINcsRS?p=preview

あなたは、CSSを削除すると、それが正常に動作します。

<input type="checkbox" ng-model="checkboxModel.value1" > 

CSS：

input[type=checkbox]:checked + label:before { 
    content: ''; 
    text-shadow: 1px 1px 1px #10758C; 
    font-size: 24px; 
    color: #f3f3f3; 
    text-align: center; 
    line-height: 24px; 
    background: url('http://cnt.in.bookmyshow.com/bmsin/SLIMG/1_4.gif') !important; 
} 

label { 
    display: inline-block; 
    cursor: pointer; 
    position: relative; 
    padding-left: 28px; 
    margin-right: 12px; 
    font-size: 16px; 
    line-height: 22px; 
    font-weight: bold; 
} 

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

label:before { 
    font-weight: normal; 
    content: ''; 
    display: inline-block; 
    width: 18px; 
    height: 18px; 
    margin-right: 10px; 
    position: absolute; 
    left: 0; 
    bottom: 1px; 
    background: url('http://cnt.in.bookmyshow.com/bmsin/SLIMG/1_1.gif?v1'); 
} 

Answer 1

問題は、「+」CSSセレクタが使用されているものであるラベルが入力をラップしている。すなわち、一致するDOMを見つけることができず、何のラベルが後に/後に存在しませんPlunkerリンクのDOM構造ごとの入力。

アプローチ1： あなたは私

<label> 
    <input /> 
    <i></i> 
</label> 

アプローチ2にラベルのすべての出現を交換するには、次のDOM構造を使用して、あなたのCSSを変更することができます： あなたは、次のDOM構造を使用してにあなたのCSSを修正することができますラベルのすべての出現をinput + labelに置き換えます（cssがラッパーラベルに適用されないようにするため）。 [この方法ではIDを持つためにチェックボックスが必要で、それに続くラベルにはfor属性が必要です。]

<label> 
    <input id="chk1" /> 
    <label for="chk1"></label> 
</label> 

希望します。