我正在尝试自定义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;
}
我正在使用谷歌浏览器,但是,错误发生在其他浏览器上。
答案 0 :(得分:3)
该复选框确实有效(但在某种程度上),但您必须点击“已选中”状态。单词以便切换图标。我做了一个片段来证明我的意思。我还没有找到一个解决方法,但如果我以后找到一个,我会发一个。
编辑:嗯,这与原始代码略有不同,但它有效!希望这会有所帮助:)
@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>
&#13;