Question

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

我在这里复制了问题：https://jsfiddle.net/y6Lty5nm/

如果你用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;
}

我在Google和Stack上看过这个问题，当然看到其他人有同样的问题，我尝试过使用网络工具包，但似乎忽略了它们？

Answer 1

firefox中有multiple records个错误，专门用于样式复选框和单选按钮。

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

label input[type="checkbox"]{ display: none; }

label input[type="checkbox"]:checked + .cr > .cr-icon{
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
}

label input[type="checkbox"] + .cr > .cr-icon{
    transform: scale(3) rotateZ(-20deg);
    opacity: 0;
    transition: all .3s ease-in;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<label>
    <input type="checkbox" value="" checked="">
    <span class="cr"><i class="cr-icon fa fa-check"></i></span>
    Click Me
</label>

Firefox复选框样式问题

1 个答案: