materialize css checkbox firefox

Question

I am trying to make a material design checkbox but i have a little problem with firefox. The firefox not showing checkbox. Other browser not have any problem it is not showing only firefox. Anyone can help me in this regard ?

DEMO

HTML

<input type="checkbox" class="rememberme"> Remember me</input>

CSS

html{
  font-family:tahoma;
}
.rememberme:before{
  visibility:visible;
  content:"";
  border:2px solid #DDD;
  width:15px;
  height:15px;
  position:absolute;
  z-index:1;
  background:transparent;
  top:-5px;
  left:-30px;
   transition: all .3s ease-in-out;
  -webkit-transition:all .3s ease-in-out;
  -moz-transition:all .3s ease-in-out;
  -o-transition:all .3s ease-in-out;
}
.rememberme{
    visibility:hidden;
    backgorund:#FFF;
    margin-top:20px;
    margin-left:40px;
    position absolute;
}
.rememberme{
  position: relative;
  background:#FFF;
  display:inline-block;
  background:red;
}
.rememberme:after{
  top:7px;
  left:-19px;
   transition: all .3s ease-in-out;
  -webkit-transition:all .3s ease-in-out;
  -moz-transition:all .3s ease-in-out;
  -o-transition:all .3s ease-in-out;
  visibility:visible;
  content:"";
  width:0px;
  height:0px;
  position: absolute;
  background: #DDD;
  border-radius:50%;
}
.rememberme:checked:after{
  visibility:visible;
  content:"";
  width:30px;
  height:30px;
  top:-13px;
  left:-32px;
  position: absolute;
  background: #DDD;
  border-radius:50%;
  z-index:0;

}
.rememberme:checked:before{
  transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  top:-3px;
  left:-24px;
  border-color:green;
  border-top:none;
  border-right:none;
  height:5px;
  width:14px
}

Answer 1

Sadly, you cannot use :before and :after pseudo elements on <input> tags. See this question for more details:

Can I use the :after pseudo-element on an input field?

The documentation says the you can only use these pseudo elements on elements that have a (document tree) content. <input> has no content, as well as <img> or <br>.

To style your checkbox, I would suggest changing your markup (adding a <label> to the checkbox and styling its :before and :after for the desired effect), or using jQuery to add an element before or after the checkbox. You would need javascript to handle the change event of checkbox, anyway.