更改复选框图标不起作用

Question

我正在尝试自定义 angular2 + google material 上的复选框。我创建了一个自定义 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;
}

我正在使用 google chrome，但是，错误发生在其他浏览器上。

Answer 1

复选框确实有效（在某种程度上），但您必须单击 'Checked' 单词才能切换图标。我做了一个片段来证明我的意思。我还没有找到解决方法，但如果我以后找到一个，我会 post 一个。

编辑：好吧，这与您的原始代码略有不同，但它有效！

希望这对您有所帮助:)

@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>

更改复选框图标不起作用

change checkbox icon doesn't work

html

css

angular2-forms

google-material-icons