Connor Connor - 4 months ago 39
CSS Question

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

I'm having some trouble getting the

:checked
styling for my custom checkboxes to display in Internet Explorer.

They work perfectly fine in Chrome.

enter image description here

... but in IE

enter image description here

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...

enter image description here

Thanks for any help!

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

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

Answer

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.