Styling checkboxes directly in IE

[MartijnCuppens]

It is possible to style checkboxes directly in IE by using the ::-ms-check pseudo element. By inheriting the border, background & border radius, the checkbox looks exactly the same. Focus styles don't need to inherit, because they are already present on the element itself.

I also removed the <span> hack from the examples and removed the .sr-only utility since it was not used anymore.

[adamwathan]

This is neat I had no idea this was possible! Makes me wonder why other CSS frameworks still do weird hacks with pseudo-elements and stuff?

Also (unrelated to this PR really) but this made me notice that the stupid radio button circle isn't perfectly centered on IE 11 😫 Can't figure it out...

Merging this though, really good stuff thanks!

[MartijnCuppens]

the stupid radio button circle isn't perfectly centered on IE 11 😫

Yeah also noticed this, this was also the case before. It might be solved if we switch to radial gradients instead of the svg, but I haven't tested this yet.

Makes me wonder why other CSS frameworks still do weird hacks with pseudo-elements and stuff

Probably something we're gonna look into for Bootstrap 5. The technique I used here was something I came up with after some research, not a copy paste from somewhere else. This repo was ideal to test it out since it's pretty small and is still in 0.x.x phase.

[adamwathan]

Found the issue, it's a known bug in IE11 where adding a border-radius to an element that has a background image causes the background image to render funny:

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/943470/

Marked as won't fix. I think we could work around this with a pseudo element but I'm not convinced I care enough, it still looks okay and IE 11 will be dead soon.