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

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>

Answer 2

It looks like a duplicate of In IE11 using pseudo element ::before and display:table-cell and glyphicons contens wont show up.

In short, there's a bug in IE10 and 11 where the font style is ignored for pseudo elements with table-cell display.

As mentioned in the presumed duplicate issue, an appropriate fix would be to use some other display type for the pseudo element in conjunction with any necessary adjustments to your width and height styles.

Answer 3

The issue you're facing is a known IE10 - IE11 bug, where these two browsers tend to completely disregard the font declaration in pseudo elements with display: table-cell. That means that properties as font, font-size, font-family, color etc will all be struck.

To circumvent this bug, it would suffice in your case to:

▶ Use display: table-cell with an actual element instead of a pseudo-element, or

▶ Change display: table-cell to display: inline-block or some other non-table-cell value for your pseudo-element.

▶ Declare a float property which has a value other than none so that it turns display: table-cell to display: block.

---

Here are some questions that face an issue with display: table-cell as well that may be of any help:

▶ IE not coloring :before as table-cell, why?

▶ Positioning of div inside display:table-cell in IE 10

▶ Display table-cell on pseudo element in IE11

Answer 4

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.