Question

我目前遇到一些复选框问题。在这里你有一个从他们中的一个提取（没有内部的PHP）：

<input type="hidden" name="func1" value="" />
<input type="checkbox" name="func1" value="1" id="func1"/>

他们通过CSS获取图像（一个用于检查，另一个用于未检查）：

#func1 {
display: block;
width: 128px;
height: 32px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
-webkit-appearance: none;
outline: 0;

}
#func1:checked {
background: url(icons/monitoring.png);
}
#func1:not(:checked) {
background: url(icons/monitoring-bw.png);
}

因此，当我在Chrome中运行时，一切正常。我看到未经检查的框的图像，当我点击它时，我可以看到已检查的图像。

但是当使用Firefox或IE时，我看到标准复选框的图像覆盖了我的自定义图像。我希望你能帮助我，它可以重现。此致！

Answer 1

为了获得样式选择框的可靠结果，实际上最好隐藏输入并使用其标签。例如：

body{display: flex;}
.mycheckbox {
  display:none;
}

.mycheckbox + label {
  padding:40px;
  padding-left:100px;
  background:url(http://www.clker.com/cliparts/M/F/B/9/z/O/nxt-checkbox-unchecked-md.png) no-repeat left center;
  background-size: 80px 80px;
}

.mycheckbox:checked + label {  
  background:url(http://www.clker.com/cliparts/B/2/v/i/n/T/tick-check-box-md.png) no-repeat left center;
  background-size: 80px 80px;
}

<input type="checkbox" id="field1" class="mycheckbox" />
<label for="field1" class="mycheckbox-label">Label</label>

Answer 2

你有：

-webkit-appearance: none;

指定，但缺少其他浏览器前缀。你可以尝试：

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

但是，即使在最新版本中，IE也不支持appearance CSS属性。 http://caniuse.com/#search=appearance

有关其他方法，请查看我的博文：Fancy CSS Checkboxes with FontAwesome

自定义复选框与Firefox / IE中的标准复选框重叠; Chrome工作正常

2 个答案: