change checkbox icon doesn't work

Question

I'm trying to customize checkbox on angular2 + google material. I create a custom css to replace checkbox icon but I can't click on it.

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

the other situation that I can click, the browser render 2 checkboxes.

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

I'm using google chrome, but, the error happens on other browsers.

can you include the rest of the code needed to create a [mcve]? — Michael Coker, Mar 23 '17 at 05:35
@IgorNunes I think I found the problem... in the root css and the absolute positioning. I have updated both the fiddle and the snippet. Please take another look. Thanks — Rachel Gallen, Mar 23 '17 at 13:12

Rachel Gallen · Accepted Answer · 2017-03-23T14:27:53.310

3

The checkbox does work (in a way) but you have to click on the 'Checked' word in order for it to toggle the icon. I made a snippet to demonstrate what I mean. I haven't found a workaround yet but I'll post one if I find one later.

EDIT: Well, this is a little different than your original code, but it works!

Hope this helps :)

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

edited Mar 23 '17 at 14:27

answered Mar 23 '17 at 08:51

Rachel Gallen

27,943
21
72
81

thank god for old fiddles - found this http://jsfiddle.net/RachGal/cvfh5oqd/ that I originally made for radio buttons but works for checkboxes. Worth a look! – Rachel Gallen Mar 23 '17 at 11:38
Thanks @Rachel Gallen. Not work for me, and I think, there's other points on my page/css that causing the error. Maybe I try to use material button. – Igor Nunes Mar 23 '17 at 12:42
Thank's @Rachel. I tested your example ouside angular2 and works. Inside angular2 doesn't work. I suspect there's something modifing my css on build. I will check and comment after solution this. Thank's for your help. Now, I need finish other activities before fix this. – Igor Nunes Mar 23 '17 at 23:16
@IgorNunes Thanks for the accept. I didn't actually realise it was an angular question, didn't see that tag. Yes indeed, that library poses difficulties (which is why I avoid it! Life is hard enough!) Hope you find a working solution, and that the answer helps in some way... – Rachel Gallen Mar 24 '17 at 00:58

change checkbox icon doesn't work

1 Answers1