Materialize css checkbox firefox
I'm trying to create a checkbox for the main stuff, but I have a little problem with firefox. Firefox checkbox is not displayed. The other browser has no problem, it doesn't show only firefox. Can anyone help me in this regard?
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
}
source to share
Unfortunately, you can not use pseudonyms :before
and :after
tags <input>
. See this question for more information:
Can I use: after the pseudo-element in the input field?
The documentation says that you can only use these pseudo-elements on elements that contain (document tree).
<input>
has no content as well<img>
or<br>
.
To create your checkbox, I would suggest changing your markup (adding <label>
to the checkbox and styling it :before
and :after
for the desired effect) or using jQuery to add an element before or after the checkbox. You will need javascript to handle the checkbox change event anyway.
source to share
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 display:none
has a different effect on the page layout. The first method reserves the space occupied by the element and hides it, while the second method completely hides the element without the space reserved on the page.
source to share