1

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

我在这里有一个小提琴：http: //jsfiddle.net/jcJJ5/

4

3 回答 3

6

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

我发现的唯一简单的解决方法是将复选框包装在 a 中<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没有任何效果。

于 2012-07-19T01:09:20.507 回答
0

您可以尝试设置 -moz-box-shadow: 两条线的颜色较浅，以覆盖 Firefox 创建的深色插图...

此外，我尝试在萤火虫中玩耍，如果你打开 -moz-appearance: none，复选框完全没问题，并且具有正常的样式，你不需要玩弄。

于 2012-07-19T02:36:30.593 回答
0

从 2021 年开始更新，似乎appearance在 Firefox 中运行良好已有一段时间了。这个问题涵盖了这个过程。

于 2021-08-03T12:32:37.957 回答