Reputation: 8980
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.
Upvotes: 3
Views: 19901
Reputation: 87303
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>
Upvotes: 8
Reputation: 2037
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 */
}
Upvotes: 3