Firefox 无法识别复选框的背景图像答案

【问题标题】：Firefox Can't Recognize Background Image of CheckboxFirefox 无法识别复选框的背景图像
【发布时间】：2014-12-09 20:34:02
【问题描述】：

我放置了一张图片作为复选框的背景。在 chrome 中一切正常，但是当我使用 Firefox 32.0.3 时，Firefox 无法识别背景图像。是否有什么我遗漏的东西导致 Firefox 无法添加到背景图像中？

CSS

input[type=checkbox]:before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url('http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg');
  background-size: 12px;
  top: 2px;
  position: absolute;
  opacity:0.4;
}

HTML

<input type="checkbox" id="chk1" />

小提琴here.

【问题讨论】：

CSS content generation before 'input' elements的可能重复
我不相信这可以解决我的问题，因为我使用的输入类型是复选框，并且图像会根据是否单击复选框而改变。除非我从这个问题中遗漏了什么？

标签： html css firefox checkbox

【解决方案1】：

我通过不同的方法解决了这个问题。我创建了一个跨度标记并使用 AngularJS（已经在我的应用程序中）我使用 ng-class 根据复选框是否被标记来将背景图像显示到跨度标记。

【讨论】：