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

Question

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

我在这里小提琴:http://jsfiddle.net/jcJJ5/

Answer 1

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

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

看我的小提琴.

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没有任何效果.