I made these custom checkboxes, they are green when they are checked and gray when they aren't :
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>It works fine on Chrome, but my checkboxes aren't displayed correctly on IE11 and Firefox , they still have the default design.
Can someone explain to me why this code doesn't work on these browsers?
On the DOM Explorer I see this (nothing else seems to override these values) :
