Custom checkbox Working in Chrome and Safari but not Firefox and IE

Question

I created a custom checkbox with basically an icon inside a checkbox. The icon is a font from flaticon so that I can easily change size and color. Unfortunately the checkbox is shown in Chrome and Safari but not in Firefox and IE.

Here is a sample of my code:

CSS: Custom Checkbox

#checkicons input[type=checkbox]{
  visibility: hidden*/
  height: 80px;
  line-height: 1.4;
}

#checkicons input[type=checkbox]:checked:after, input[type=checkbox]:after{
  visibility: visible;
  font-size:50px;
  margin-left: -36px;
  padding: 15px;
  border-radius: 8px;
  line-height: 1.4;
}

#checkicons input[type=checkbox]:checked:after{
  color: white;
  border: solid black;
  background-color: #1e6e11;
  border-width: 1px;
}

#checkicons input[type=checkbox]:after{
  color: #1e6e11;
  border: solid #1e6e11;
  background-color: white;
  border-width: 1px;
}

#checkicons label{
    max-width: 90px;
}

Html: Checkbox

<div id="checkicons">
  <input type="checkbox" class="flaticon-leisure4" id="housecare" name="housecare" onchange="toggleDiv(this)"></input><br>
  <label for="housecare">House care</label>
</div>

CSS: Flaticon

@font-face {
    ...url to fonts...
    font-weight: normal;
    font-style: normal;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
  font-family: Flaticon;
  .flaticon-leisure4:after {
  content: "\e00f";
}

I did some tests on the code while trying to fix this issue. The behavior on Firefox and Safari is the same like I would delete the class in the html of the checkbox.

Here I do have two screenshots of the result. The first is working with chrome, the second is the not working version with firefox and IE which equals with the result if I would delete the code 'class="flaticon-leisure4"' from the html.

Result on Chrome, Safari

Result on Firefox, IE

I would be happy If I can solve this problem or if you can give me alternative suggestions.

Possible duplicate of [Can I use the :after pseudo-element on an input field?](http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field) — Hidden Hobbes, Jan 20 '16 at 12:36
Please see the link in my previous comment. Pseudo elements should only really work on container elements. Chrome in this case is not really behaving correctly. If you want this to work in FF and IR the markup will need to be changed. — Hidden Hobbes, Jan 20 '16 at 12:45
I already tried to use the information from your post. I deleted the :after and :before in both CSS files but then checkbox is not showing at all. — DS87, Jan 20 '16 at 13:00
See this - http://stackoverflow.com/questions/19693872/custom-css3-checkbox-doesnt-work-on-firefox-or-ie?rq=1 — Jinu Kurian, Jan 20 '16 at 13:05
@DS87 As the pseudo elements are responsible for showing the icon removing them completely will cause it not to be shown at all. One workaround would be to restructure your CSS to apply the pseudo element to the label instead. — Hidden Hobbes, Jan 20 '16 at 13:07
I gonna try out the label solution and will text as soon as I will have a result. — DS87, Jan 20 '16 at 13:11
So far so good. The label is now showing correctly at all browser like it should. With the for tag i added the lable to make it clickable. I will post the solution in a bit. Thanks Hidden Hobbes! — DS87, Jan 20 '16 at 15:33

score 0 · Accepted Answer · answered Jan 20 '16 at 15:51

Pseudo elements are only working for container elements. Therefore I changed the customized checkbox to a label. Instead of the customized checkbox I just following code

CSS: Custom Icon

#checkicons .icon{
    max-width: 90px;
    font-family: Flaticon;
  font-size:50px;
  margin-left: -36px;
  padding: 5px 15px 5px 15px;
  border-radius: 8px;
  line-height: 1.4;
    color: #1e6e11;
  border: solid black;
  background-color: white;
  border-width: 1px;
}

New HTML

<input type="checkbox" id="housecare" name="housecare" onchange="toggleDiv(this); toggleIcon('houseCareIcon')">
    <label for="housecare" id="houseCareIcon" name="houseCareIcon" class="flaticon-leisure4 icon"></label>
    <label for="housecare">House Care</label>
</input>

The color handling whether the label should look like checked or not checked is now done with JavaScript.

Javascript: Check Color Handling

function toggleIcon(obj, checkobj){
    if(document.getElementById(checkobj.id).checked){
        document.getElementById(obj).style.color='white';
        document.getElementById(obj).style.backgroundColor='#1e6e11';
    }else{
        document.getElementById(obj).style.color='#1e6e11';
        document.getElementById(obj).style.backgroundColor='white';
    }
}

Thanks Hidden Hobbes for the "inspiration"!

Custom checkbox Working in Chrome and Safari but not Firefox and IE

1 Answers1