0

As a relative newbie to CSS and HTML5, I have been using a CSS file that I found at Bootstrap checkbox replacement to display font awesome checkboxes and radio buttons. It works fine in Chrome but not in Internet Explorer even though the W3C validator shows it as valid.

Does anyone have any ideas what is wrong?

/* CSS used here will be applied after bootstrap.css */

.demo {
  padding:50px;
}

.demo label{
   top:3px; left:15px;
   margin-right:30px;     
   position:relative;     
}  


input.faChkRnd, input.faChkSqr {
   visibility: hidden;
}

input.faChkRnd:checked:after, input.faChkRnd:after,
input.faChkSqr:checked:after, input.faChkSqr:after {
   visibility: visible;
   font-family: FontAwesome;
   font-size:25px;height: 17px; width: 17px;
   position: relative;
   top: -3px;
   left: 0px;
   background-color:#FFF;
   display: inline-block;
}

input.faChkRnd:checked:after {
   content: '\f058';
}

input.faChkRnd:after {
   content: '\f10c';
}

input.faChkSqr:checked:after {
   content: '\f14a';
}

input.faChkSqr:after {
   content: '\f096';
}

Edited

So just to clarify, if you open up http://www.bootply.com/H289A4AIGZ# in Chrome the checkboxes display correctly but when you open it up in IE11 they do not appear at all - regardless of the valid CSS.

David Brower
  • 2,888
  • 2
  • 25
  • 31
  • 2
    **What** doesn't work? What do you expect to see and what does it show instead? – JJJ Nov 16 '14 at 19:46
  • 1
    Just because CSS shows up as valid in some validator doesn't meant it'll render the way you want across all browsers. Each browser handles certain style elements a bit differently than others. This is why we have separate rule indicators to denote special style instructions for browser/renderer types. – MattD Nov 16 '14 at 20:03
  • My first downvote! Is there a problem with my question? – David Brower Nov 16 '14 at 20:05
  • Yes, there is a problem - the question does not specify, what exactly the problem is. "Works fine" vs "not working" - what parts have a problem? What is the problem? – naivists Nov 16 '14 at 20:09
  • You're right. I'll make the issue more explicit. Thanks for the pointer. – David Brower Nov 16 '14 at 20:14
  • The problem *might* be with Bootply itself. There are a lot of JS errors in IE11 that don't happen in Chrome, for me. jQuery does not seem to load properly in IE11. – Alex W Nov 16 '14 at 20:25
  • Its pretty obvious what doesn't work if you open the link in IE11. The `:before` on the checkbox doesn't show up. Doesn't seem worth a downvote. *shrug* – CodingWithSpike Nov 16 '14 at 20:32
  • As someone who has been working with HTML5/CSS for a grand for about two weeks it doesn't seem obvious to me. :-) – David Brower Nov 16 '14 at 20:35
  • 1
    Explain the problem in terms of the code included in the question, not “if you open up...” (some live URL). – Jukka K. Korpela Nov 16 '14 at 21:30

1 Answers1

2

I've fought this before, and if I remember correctly, IE hides the :before pseudo element along with the checkbox, or just doesn't support :before on checkboxes.

The best I have done is here: http://jsfiddle.net/rally25rs/MRa2H/

The 3rd (black colored) checkbox works in IE but the other 2 don't. It works by using the sibling selector to decide which icon to show.

.works-in-ie input[type="checkbox"]:checked ~ .checked
{
    display: inline-block;
}
.works-in-ie input[type="checkbox"]:checked ~ .unchecked
{
    display: none;
}
.works-in-ie input[type="checkbox"] ~ .checked
{
    display: none;
}
.works-in-ie input[type="checkbox"] ~ .unchecked
{
    display: inline-block;
}

.works-in-ie input[type="checkbox"] {
    display: none;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="works-in-ie">
<label><input type="checkbox"/><i class="fa fa-arrow-down unchecked"></i><i class="fa fa-arrow-up checked"></i> Click Me</label>
</div>

Here is a screenshot of this answer and the code snippet working in IE11:

Working in IE11

CodingWithSpike
  • 42,906
  • 18
  • 101
  • 138