html - 自定义复选框与FirefoxIE中的标准复选框重叠; Chrome工作正常

html - 自定义复选框与FirefoxIE中的标准复选框重叠; Chrome工作正常,第1张

我目前遇到一些复选框问题。在这里你有一个从他们中的一个提取(没有内部的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时,我看到标准复选框的图像覆盖了我的自定义图像。 我希望你能帮助我,它可以重现。 此致!

最佳答案:

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

你有:

-webkit-appearance: none;

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

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

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

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

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复