Internet Explorer 'input:checked + label:before' styling is not rendered

Question

I'm having some trouble getting the :checked styling for my custom checkboxes to display in Internet Explorer.

They work perfectly fine in Chrome.

... but in IE

Here's the relevant styling

input[type="radio"], input[type="checkbox"] {
    opacity: 1;
    position: absolute;
    top: -9999;

    & + label {
        vertical-align: middle;
    }
}

input[type="radio"] + label:before,
input[type="checkbox"] + label:before {
    content: '\f3fd';
    font-family: 'Ionicons';
    width: 26px;
    height: 20px;
    border: 2px solid #45555F;
    font-size: 24px;
    color: transparent;
    display: table-cell;
    text-align: center;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    padding: 0 2px;
}

input[type="radio"]:checked + label:before,
input[type="checkbox"]:checked + label:before {
    content: '\f383';
    font-family: 'Ionicons';
    font-size: 24px;
    width: 26px;
    height: 20px;
    text-align: center;
    display: table-cell;
    padding: 0 2px;
    border: 2px solid #45555F;
    color: #8ec549;
}

input[type="radio"] + label:before {
    border-radius: 50% !important;
}

I did also notice that Internet Explorer simply removes the styling on load...

Thanks for any help!

EDIT: Codepen Demo (This demo does not work in IE either)

http://codepen.io/anon/pen/rLJqyK

Answer 1

As opposed to modifying the :before pseudo element on checked I simply used the :after pseudo element for the active state and flick between opacities to hide and show them accordingly.

Thanks for anybody who helped.

Answer 2

Try another approach, I usually use the approach formatted below.

The important point here is: we should use 'for' attribute on the 'label' element so that it is linked to the corresponding 'input' element.

This will work in IE as well.

input[type="checkbox"] {
  display: none;
}
label {
  padding-left: 25px;
  position: relative;
  cursor: pointer;
}
label::before {
	content: "";
	width: 16px;
	height: 16px;
	border: 1px solid #aaa;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}
label p {
  display: inline-block;
}
label input[type="checkbox"]:checked + p::after {
	content: "";
	display: block;
	position: absolute;
	width: 10px;
	height: 5px;
	border-left: 2px solid;
	border-bottom: 2px solid;
	transform: rotate(-45deg);
	left: 3px;
	top: 4px;
	color: #3da5c3;
}

<label for="testInput">
  <input type="checkbox" name="test" id="testInput" value=1 />
  <p>Test Checkbox</p>
</label>