更改複選框圖標不起作用

Question

我試圖在angular2 + google材質上自定義複選框。 我創建了一個自定義CSS來替換複選框圖標，但我無法點擊它。

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

input[type=checkbox]:checked + label:before{ 
    font-family: "Material Icons"; 
    content: '\E834'; 
    color: #295da7; 
    display: inline-block; 
    vertical-align: middle; 
} 

input[type=checkbox] + label:before{ 
    font-family: "Material Icons"; 
    content: '\E835'; 
    color: #295da7; 
    display: inline-block; 
    vertical-align: top; 
    text-align: center; 
    font-size: 18px; 
} 

，我可以點擊，瀏覽器渲染2個複選框的其他情形。

input[type=checkbox]:checked:before{ 
    font-family: "Material Icons"; 
    content: '\E834'; 
    color: #295da7; 
    display: inline-block; 
    vertical-align: middle; 
} 

input[type=checkbox]:before{ 
    font-family: "Material Icons"; 
    content: '\E835'; 
    color: #295da7; 
    display: inline-block; 
    vertical-align: top; 
    text-align: center; 
    font-size: 18px; 
} 

我使用谷歌瀏覽器，但是，錯誤發生在其他瀏覽器。

Answer 1

該複選框確實有效（某種方式），但您必須單擊「選中」一詞才能切換圖標。我做了一個片段來說明我的意思。我還沒有找到解決方法，但如果以後找到一個，我會發佈一個。

編輯：好吧，這是比你的原始代碼有點不同，但它的作品！

希望這有助於:)

@font-face { 
 
    font-family: "MaterialIcons"; 
 
    src: url(https://github.com/google/material-design-icons/blob/master/iconfont/MaterialIcons-Regular.ttf); 
 
} 
 

 
[name=check]{ 
 
    display: none!important; 
 
} 
 

 
[for^=check]{ 
 
    font-family: "MaterialIcons"; 
 
    content: '\E834'; 
 
    position: relative; 
 
    margin:38px 
 
} 
 

 
[for^=check]:before{ 
 
    font-family: "MaterialIcons"; 
 
    content: '\E834'; 
 
    position: relative; 
 
    padding: 5px; 
 
    width: 45px; 
 
    margin-right:10px; 
 
    height: 25px; 
 
    background: white; 
 
} 
 

 
[type=checkbox]:checked + [for^=check]:before{ 
 
    background: white; 
 
    font-family: "MaterialIcons"; 
 
    content: '\E835'; 
 
    width:90px; 
 
} 
 
[for^=check], input[name=check]{display:inline-block; vertical-align:top; position:relative;}

<input id=check-1 type=checkbox name=check /> 
 
<label for=check-1>Checked</label> 
 
<input id=check-2 type=checkbox name=check /> 
 
<label for=check-2>Unchecked</label>