custom check in firefox

Question

У меня настоящие проблемы с этим,

он работает с большинством браузеров (все еще тестирование), однако Firefox - настоящая проблема.

Флажок должен быть круглым и зеленый галочкой/чек внутри, как только проверено.

Однако в Firefox я получаю окно квадрат и черный тик

.regular-checkbox { 
 
    display: inline-block; 
 
    border-radius: 50%; 
 
    width: 38px; 
 
    height: 38px; 
 
    border: 1px solid #ccc; 
 
} 
 
.regular-checkbox input { 
 
    opacity: 0; 
 
    position: absolute; 
 
} 
 
.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: 10px; 
 
}

<label for='product-45-45' class="active"> 
 
    <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="" /> 
 

 
    <div class="accord-text"> 
 
    <strong>title</strong> 
 
    </div> 
 
</label>

Answer 1

Этот код работал на всех браузерах одинаково.

HEAVY CHECK MARK ✔ - выглядит по-разному в firefox, поэтому я перехожу к CHECK MARK ✓.

Лучший способ сделать это правильно, используя значки шрифтов, как FontAwesome.

Working Fiddle

HTML:

<label for="checkbox"> 
    <div class="accord-text"> 
    <strong>title</strong> 
    </div> 
    <div class="mycheckbox"> 
    <input id="checkbox" class="regular-checkbox" type="checkbox" name="checkbox"/> 
    <span class="newcheckbox"></span> 
    </div> 
</label> 

CSS:

.mycheckbox { 
    display: inline-block; 
    position: relative; 
    width: 17px; 
    height: 17px; 
    border: 1px solid gray; 
    border-radius: 17px; 
} 

.mycheckbox > input[type="checkbox"] { 
    opacity: 0; 
} 

.mycheckbox > .newcheckbox:before { 
    content: '\2713'; 
    opacity: 0; 
    position: absolute; 
    top: 3px; 
    left: 2px; 
    font-size: 15px; 
    color: #19a73e; 
    transition: ease 0.1s; 
    -webkit-transition: ease 0.1s; 
    -moz-transition: ease 0.1s; 
    -ms-transition: ease 0.1s; 
    -o-transition: ease 0.1s; 
} 

.mycheckbox > input[type="checkbox"]:checked ~ .newcheckbox:before { 
    opacity: 1; 
    top: 1px; 
} 

.accord-text { 
    display: inline-block; 
} 

В следующий раз вам нужно отключили флажок и "дизайн" свой собственный один. Его работа каждый раз.