CSS :before not working in IE11

Question

I'm replacing traditional radio buttons with icons from FontAwesome. Everything works great in Chrome and Firefox, but IE11 is having issues - the icons I'm replacing the radio buttons with do not show up at all.

Edit with working Fiddle: https://jsfiddle.net/sow1a04m/

Example in Chrome:

Example in IE11:

Here's my HTML:

<tr>
    <td class="vert-align">Valid Signed and dated delivery ticket in patient's record.</td>
    <td class="text-center vert-align">
        <label>
            <input type="radio" name="radio-group-1" id="radio-group-1-Y" value="Y" />
        </label>
    </td>
    <td class="text-center vert-align">
        <label>
            <input type="radio" name="radio-group-1" id="radio-group-1-N" value="N" />
        </label>
    </td>
    <td class="text-center vert-align">
        <label>
            <input type="radio" name="radio-group-1" id="radio-group-1-NA" value="NA" />
        </label>
    </td>
</tr>

And here's my CSS:

#dlg-audit-intake-compliance-checklist input[type=radio] {
    visibility: hidden;
}

#dlg-audit-intake-compliance-checklist input[type=radio]:hover {
    cursor: pointer;
}

#dlg-audit-intake-compliance-checklist input[type=radio]:before {
    visibility: visible;
    font-family: FontAwesome;
    content: "\f10c";
    font-size: 25px;
    text-shadow: 1px 1px 0px #ddd;
    margin-bottom: 10px !important;
}

#dlg-audit-intake-compliance-checklist input[value=Y]:checked:before {
    color: #009C15;
    content: "\f00c";
}

#dlg-audit-intake-compliance-checklist input[value=N]:checked:before {
    color: #AD0000;
    content: "\f00d";
}

#dlg-audit-intake-compliance-checklist input[value=NA]:checked:before {
    color: #F7D200;
    content: "\f05e";
}

I'm thinking it may have something to do with the visibility settings I've applied, but I haven't been able to figure it out on my own.

Could you post a working code snippet with the font linked so we have the issue reproduced, as now it will be a lot of guessing — Asons, Jun 15 '16 at 18:43
Also check this post, it might give a hint: http://stackoverflow.com/questions/23954877/internet-explorer-11-and-supported-web-fonts — Asons, Jun 15 '16 at 18:48
@LGSon thank you! I just updated my question with a fiddle showing the problem. Viewing that Fiddle in chrome works great, but as you can see in IE11, the icons don't show. I will also check out that link you posted. — FastTrack, Jun 15 '16 at 18:52
Ahh, the problem is using pseudo element on an input element, it does not work in IE, use a label as target instead ... it actually shouldn't work in Chrome either as pseudo element is suppose to not work on single tag elements — Asons, Jun 15 '16 at 18:57
Possible duplicate of [CSS pseudo selectors ::before and ::after will not displayed in FF 44 and IE11](http://stackoverflow.com/questions/35937873/css-pseudo-selectors-before-and-after-will-not-displayed-in-ff-44-and-ie11) — Asons, Jun 15 '16 at 18:58

Asons · Accepted Answer · 2020-06-19T06:50:29.827

The problem is using pseudo element on an input element, it does not work in i.a. IE, use a label as target instead ... and it actually shouldn't work in Chrome (or any other browser) either, as a pseudo element is not supposed to work on single tag elements.

I changed this rule to show how you could do, so you'll see it now works with FontAwesome

#dlg-audit-intake-compliance-checklist label:before {
    font-family: FontAwesome;
    content: "\f10c";
    font-size: 25px;
    text-shadow: 1px 1px 0px #ddd;
    margin-bottom: 10px !important;
}

Also note, for the input:checked to work (target its label) you can't have the input wrapped inside the label, it must be positioned before the label in the markup, like this:

<input type="radio" name="radio-group-1" id="radio-group-1-Y" value="Y" />
<label for="radio-group-1-Y"></label>

score 3 · Answer 2 · answered Jun 15 '16 at 19:11

3

You cannot reliably style checkbox and radio inputs across browsers and operating systems. This is not a problem specific to IE. It is an operating system control. Use CSS to target the input label and hide the checkbox instead.

HTML

<input type="checkbox" id="checkbox">
<label for="checkbox"></label>

CSS

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label {
  background-image: /* whatever */
}

input[type="checkbox"]:checked + label {
  background-image: /* whatever */
}

answered Jun 15 '16 at 19:11

user2867288

1,979
16
20

Same with using a disabled option in select list as a header in IE but there is a trick so that the text is grey in IE (no text-shadow) and the css works in other browsers. – yardpenalty.com Jun 15 '16 at 19:14
I think if you wrap the checkbox with the label you don't even need the for= to make the label clickable if I am not mistaken. Might just be a bootstrap thing not sure – yardpenalty.com Jun 15 '16 at 19:16
@yardpenalty That's correct, though the `:checked` code will not work as it can't target the parent of the `input`, so how it is now is needed to do the job asked by the OP – Asons Jun 15 '16 at 19:31

CSS :before not working in IE11

2 Answers2