Styled css do not appear in firefox - html

Question

I have a checkbox that I have styled accordingly. Like this :
input[type=checkbox] {
transform: scale(1.3);
}
input[type=checkbox] {
width: 30px;
height: 30px;
margin-right: 15px;
cursor: pointer;
font-size: 17px;
visibility: hidden;
}
input[type=checkbox]:after {
content: " ";
background-color: rgba(224, 214, 214, 0.877);
display: inline-block;
margin-left: 10px;
padding-bottom: 5px;
color: #fff;
width: 22px;
height: 25px;
visibility: visible;
border: 1px solid transparent;
padding-left: 3px;
border-radius: 5px;
}
input[type=checkbox]:checked:after {
content: "\2714";
padding: -5px;
background: red;
font-weight: bold;
}
<input type="checkbox" [(ngModel)]="Option1" />
<p>Option1</p>
I tested this and it worked in Chrome and Opera, but I forgot to check Firefox.
Now I see that the checkboxes don't appear there at all.
I understand it is an issue of using :after for checkbox, but how do I fix this ?
So that the same checkbox appears styled on the browsers?.
I am uncertain of what to do so that I keep the design.
Thank you.

Answer 1

Read these specifications
:before and :after should only work on the element which can act as a
container of content. cannot contain any content so it should
not support those pseudo-elements. Chrome supports because it does not
follow the spec
However you can use <span> tag next to input tag to achieve this like below. It will work on firefox as well
body {
font: 13px Verdana;
}
label {
position: relative;
display: inline-block;
text-align: center;
}
label span {
display: block;
margin-top: 10px;
cursor: pointer;
}
input[type=checkbox] {
width: 30px;
height: 30px;
cursor: pointer;
margin: 0;
opacity: 0;
}
input[type=checkbox]+span:after {
content: "";
background-color: rgba(224, 214, 214, 0.877);
color: #fff;
width: 30px;
height: 30px;
border-radius: 5px;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
line-height: 30px;
}
input[type=checkbox]:checked+span:after {
content: "\2714";
background: red;
}
<label>
<input type="checkbox" [(ngModel)]="Option1" />
<span>Option1</span>
</label>