2

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) :

Checkboxes checkboxes2

Pascal Goldbach
  • 977
  • 1
  • 15
  • 34
  • 2
    They have the default design in Firefox, too. The short version is, you can't change what a checkbox looks like. You can only hide a checkbox and style your own custom one. That you can style the actual checkbox in Chrome is more a bug, really. – TylerH Jun 09 '16 at 13:30
  • Thanks @TylerH I edited my question – Pascal Goldbach Jun 09 '16 at 13:33
  • See http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css – TylerH Jun 09 '16 at 13:34
  • I'd suggest - and this is purely a *guess*, hence it's not posted as an answer - that this is because of the use of pseudo-elements to style the check-box `` elements. As an `` is a void element (it can have no child-elements or content) it should not have a `::before` (or `::after`) pseudo. Why Chrome (and potentially other browsers) allows this I don't know. But this feels like the correct behaviour, and a bug in Chrome, rather than in IE 11 (as odd as that still feels to say). – David Thomas Jun 09 '16 at 13:35
  • You're right @DavidThomas, I made some researches on Google and apparently IE and Firefox doesn't support pseudo-elements on input fields (for the moment only Webkit browsers support pseudo-elements on checkboxes), you can post it as an answer if you want. – Pascal Goldbach Jun 09 '16 at 14:02
  • @PascalGoldbach inst about pseudo elements, you cant change the checkbox bg in ie11, only outside backgroud of checkbox.. .https://css-tricks.com/browser-support-pseudo-elements/ – HudsonPH Jun 09 '16 at 14:06

0 Answers0