Html Firefox复选框样式问题

我正在尝试更正我创建的一些自定义样式复选框的样式。除了FireFox之外，它们在所有浏览器中都很好看

我在这里重复了这些问题：

如果你在chrome中打开它，它看起来很棒，但在FireFox中，它几乎完全忽略了样式

<li><input type="checkbox" class="chck" data-filter=".sp" id="sp"><p>Super Parent</p></li>
<li><input type="checkbox" class="chck" data-filter=".cf" id="cf"><p>Control Freak</p></li>
<li><input type="checkbox" class="chck" data-filter=".fs" id="fd"><p>Food Snob</p></li>
<li><input type="checkbox" class="chck" data-filter=".bh" id="bh"><p>Bean Head</p></li>
<li><input type="checkbox" class="chck" data-filter=".bb" id="bb"><p>Busy Bee</p></li>

input[type="checkbox"]{
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: #999999;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    -moz-border-radius:100px;
    transition: all 0.5s;
    cursor: pointer;
}

input[type="checkbox"]:checked{
    background-color: #19a89d;
}

input[type="checkbox"]:focus{
    outline: none;
}

input[type="checkbox"]:hover{
    background-color: #19a89d;
}

超级父级

控制狂

食物势利鬼

豆头

忙碌的蜜蜂

输入[type=“checkbox”]{ 外观：无； -moz外观：无； -webkit外观：无； 背景色：#999999； 宽度：50px； 高度：50px； 边界半径：100px； -moz边界半径：100px； 过渡：均为0.5s； 光标：指针； } 输入[type=“checkbox”]：选中{ 背景色：#19a89d； } 输入[type=“checkbox”]：焦点{ 大纲：无； } 输入[type=“checkbox”]：悬停{ 背景色：#19a89d； } 我在Google和Stack上查过这一点，当然也看到过其他人有同样的问题，我尝试过应用web工具包，但它似乎忽略了它们？

firefox中有很多专门用于设置复选框和单选按钮样式的bug

我的建议是编写自己的解决方案

标签输入[type=“checkbox”]{display:none；}
标签输入[type=“checkbox”]：选中+.cr>.cr图标{
变换：缩放（1）旋转（0度）；
不透明度：1；
}
标签输入[type=“checkbox”]+.cr>.cr图标{
变换：缩放（3）旋转（-20度）；
不透明度：0；
过渡：所有.3s都很轻松；
}

点击我

这是我最后使用的方法，但通过为我确定这一点，我会感到轻松。