無法重寫angularjs中的複選框

我想重寫angular.js中的checkbox css。它對於正常的javascript代碼工作正常。無法重寫angularjs中的複選框

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'); 
}

來源

2017-03-24 antish Gajwani

input [type = radio]，input [type = checkbox] { display：none; } – Kenny

以上CSS的目的是什麼？ – Kenny

要隱藏原始複選框，即隱藏複選框的框 –

的問題是，「+」 CSS選擇器中使用，無法找到任何匹配的DOM即標籤被包裹在輸入和無標籤存在以下/後輸入，按照Plunker鏈接中的DOM結構。

方法1：您可以使用下面的DOM結構和修改CSS更換標籤的所有出現的地方我

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

方法2：您可以使用下面的DOM結構和修改的CSS將所有出現的標籤替換爲輸入+標籤（爲了避免將css應用於包裝標籤）。 [注意：此方法需要的複選框，有標識和標籤下它有一個爲屬性]

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

希望這有助於！

來源

2017-03-24 10:24:49 TheSaint

無法重寫angularjs中的複選框

回答

相關問題