Styled css nicht in Firefox

Question

Ich habe eine Checkbox, die ich entsprechend gestylt habe. Wie folgt aus:

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>

testete ich dies und es funktionierte in Chrome und Opera, aber ich habe vergessen, Firefox zu überprüfen. Jetzt sehe ich, dass die Checkboxen dort gar nicht erscheinen. Ich verstehe, es ist ein Problem der Verwendung: nach Checkbox, aber wie kann ich das beheben? Damit das gleiche Kontrollkästchen auf den Browsern gestylt erscheint ?. Ich bin unsicher was ich tun soll, damit ich das Design behalten kann. Danke.

Answer 1

Lesen Sie diese specifications

: vor und: nach nur auf das Element funktionieren sollte, die als Behälter Inhalt handeln kann. kann keinen Inhalt enthalten, so sollte es diese Pseudo-Elemente nicht unterstützen. Chrome unterstützt, weil es nicht die Spezifikation folgen

immer Sie <span> Tag neben input Tag verwenden können, um diese wie unten zu erreichen. Es wird auch auf firefox arbeiten

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>