Question

我有HTML和CSS我用来构建自定义复选框的代码。我相信我的代码有正确的网络套件，但它似乎不适用于FireFox。

下面的代码：

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; 
} 

期望的结果的屏幕截图（在Chrome作品）：

Answer 1

尝试使用此代码，我不知道解释，但我做了一个版本给你;）

.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

这是Firefox的一个已知的问题 - 有一个变通方法使用<label>和<span>。

MDN还提到造型某些表单元素有点痛苦 - 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>