自定义复选框无法在IE11和Firefox上正确显示

Question

我制作了这些自定义复选框，检查时它们是绿色的，而当它们不是时它们是灰色的：

input[type=checkbox]{
	width: 20px; height: 20px;
	margin: 0 3px;
	display: inline-block;
	position: relative;
}

input[type=checkbox]:checked:before{
	background-color: #219741;
	display: inline-block;
	width: 100%; height: 100%;
	border: 0;
}

input[type=checkbox]:checked:after{
	content: "";
}

input[type=checkbox]:not(:checked):before{
	background-color: #ddd;
	display: inline-block;
	width: 100%; height: 100%;
	border: 0;
}

input[type=checkbox]:not(:checked):after{

}


.reserv-vehicule:checked:before{content: url('');}
.reserv-vehicule:not(:checked):before{content: url('');}

<div class="checkboxes">
  
  <input type="checkbox" class="reserv-vehicule" checked="checked">
  <input type="checkbox" class="reserv-vehicule" checked="checked">
  <input type="checkbox" class="reserv-vehicule" checked="checked">
  <input type="checkbox" class="reserv-vehicule" checked="checked">
  <input type="checkbox" class="reserv-vehicule">

</div>

它在Chrome上运行正常，但我的复选框在IE11和Firefox上无法正确显示，它们仍然采用默认设计。

有人可以向我解释为什么这些代码在这些浏览器上不起作用吗？

在DOM资源管理器上，我看到了这一点（似乎没有其他东西覆盖这些值）：