Question

我有一个包含appearance: none;的复选框。这在chrome中工作，但在Firefox中它留下了一个我无法删除的插入边框。我已经尝试了border: none。

Answer 1

不幸的是，似乎没有在复选框上设置任何属性会有所帮助。

我找到的唯一简单的解决方法是将复选框包装在<div>中，并遮挡边框。

查看我的Fiddle。

<强> HTML：

<div class="checkbox-container"><input type="checkbox" /></div>

<强> CSS：

input[type="checkbox"] {
    width: 110px;
    height: 110px;
    background: red;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    position: relative;
    left: -5px;
    top: -5px;
}
.checkbox-container {
    position: absolute;
    display: inline-block;
    margin: 20px;
    width: 100px;
    height: 100px;
    overflow: hidden;
}

顺便说一句，（至少在Firefox中），设置background没有任何效果。

Answer 2

你可以尝试设置-moz-box-shadow：两条线的颜色较浅，以覆盖firefox创建的黑暗插图......

另外，我尝试在firebug中玩游戏，如果你转了-moz-appearance：none，那么复选框就完全没问了，并且你应该不需要使用正常的样式。

Answer 3

从 2021 年开始更新，看来 appearance 在 Firefox 中运行良好已经有一段时间了。此 issue 涵盖了整个过程。

Firefox - 从未修饰的复选框中删除边框

3 个答案: