3

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
}

2 Answers2

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.

Community
  • 1
  • 1
John Bupit
  • 10,406
  • 8
  • 39
  • 75
0

The problem seems to be in this line of your CSS:

.rememberme{ visibility:hidden;

This line takes precedence over the above rule .rememberme:before{ visibility:visible;

EDIT: Using visibility:hidden instead of display:none has different effects on page layout. The first method reserves the space, occupied by element and hides it, while the second method hides completely the element with no space reserved on page.

Bud Damyanov
  • 30,171
  • 6
  • 44
  • 52