Cross-Browser benutzerdefinierte Kontrollkästchen

Question

Ich habe HTML und CSS Code, den ich verwendet habe, um ein benutzerdefiniertes Kontrollkästchen zu erstellen. Ich glaube, dass mein Code die richtigen Web-Kits hat, aber auf FireFox scheint es nicht zu funktionieren.

Hier ist der Code:

HTML

<input type='checkbox' style="float: left" class='regular-checkbox big-checkbox' 
    checked='checked' id='product-45-45' name='product_id_page-0[45-45]' 
    value='45-45' data-first_price="11.99" data-second_price="" data-paysys="" /> 

CSS

.regular-checkbox { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    background-color: #fafafa; 
    border: 1px solid #cacece; 
    box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0); 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0); 
    padding: 9px; 
    border-radius: 20px; 
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px; 
    display: inline-block; 
    position: relative; 
} 
.regular-checkbox:active, 
.regular-checkbox:checked:active { 
    box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 1px 3px rgba(0,0,0,0); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 1px 3px rgba(0,0,0,0); 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 1px 3px rgba(0,0,0,0); 
} 
.regular-checkbox:checked { 
    background-color: #e9ecee; 
    box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0),inset 15px 10px -12px rgba(255,0,0,0); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0),inset 15px 10px -12px rgba(255,0,0,0); 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0),inset 15px 10px -12px rgba(255,0,0,0); 
} 
.regular-checkbox:checked:after { 
    content: '\2714'; 
    font-size: 14px; 
    position: absolute; 
    top: 0; 
    left: 3px; 
    color: #19a73e; 
} 
.big-checkbox { 
    padding: 18px; 
} 
.big-checkbox:checked:after { 
    font-size: 37px; 
    top: -7px; 
    left: 2px; 
} 

Screenshot von dem gewünschten Ergebnis (Arbeiten in Chrome):

Answer 1

Ausprobieren Verwenden Sie diesen Code, ich weiß nicht erklären, aber ich habe eine Version für Sie;)

.regular-checkbox{ 
 
\t \t display: inline-block; 
 
\t \t border-radius: 50%; 
 
\t \t width: 38px; 
 
\t \t height: 38px; 
 
\t \t border: 1px solid #ccc; 
 
\t } 
 
\t .regular-checkbox input{ 
 
\t \t opacity: 0; 
 
\t \t position: absolute; 
 
\t } 
 
\t .regular-checkbox small{ 
 
\t \t width: 100%; 
 
\t \t height: 100%; 
 
\t \t float: left; 
 
\t } 
 
\t .regular-checkbox input:checked ~ small:after{ 
 
\t \t content: '\2714'; 
 
\t \t height: 38px; 
 
\t \t width: 38px; 
 
\t \t color: green; 
 
\t \t font-size: 26px; 
 
\t \t text-align: center; 
 
\t \t float: left; 
 
\t }

<label class="regular-checkbox"> 
 
    <input type="checkbox"> 
 
    <small></small> 
 
</label>

Answer 2

Dies ist ein bekanntes Problem in Firefox - es gibt eine Abhilfe mit <label> und <span>.

MDN erwähnt auch, dass das Styling einiger Formelemente ein bisschen Schmerz ist - read more here.

.checkbox input[type="checkbox"] { 
 
    display: none; 
 
} 
 
.checkbox span { 
 
    background-color: #fafafa; 
 
    border: 1px solid #cacece; 
 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0), inset 0 -15px 10px -12px rgba(0, 0, 0, 0); 
 
    padding: 22px; 
 
    -webkit-border-radius: 50%; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.checkbox :active + span, 
 
.checkbox :checked:active span { 
 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0), inset 0 1px 3px rgba(0, 0, 0, 0); 
 
} 
 
.checkbox :checked + span { 
 
    background-color: #e9ecee; 
 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0), inset 0 -15px 10px -12px rgba(0, 0, 0, 0), inset 15px 10px -12px rgba(255, 0, 0, 0); 
 
} 
 
.checkbox :checked + span:after { 
 
    content: '\2714'; 
 
    font-size: 14px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0px; 
 
    width: 100%; 
 
    color: #19a73e; 
 
    text-align: center; 
 
} 
 
.big-checkbox { 
 
    padding: 18px; 
 
} 
 
.big-checkbox:checked + span:after { 
 
    font-size: 37px; 
 
}

<label class="checkbox" for="product-45-45"> 
 
    <input type='checkbox' style="float: left" class='regular-checkbox big-checkbox' checked='checked' id='product-45-45' name='product_id_page-0[45-45]' value='45-45' data-first_price="11.99" data-second_price="" data-paysys="" /> 
 
    <span></span> 
 
</label>