0

input[type="checkbox"]:checked + span does not work in IE. Actually the style rule is not even seen in the developers tool, when inspect element is done.

<label>
<input type="checkbox" name="Hello" id="Hello"/>
<span>Hello</span>
</label>

CSS:

input[type="checkbox"]:checked + span {
font-weight:bold;
}

When the checkbox is checked, I am trying to make the span bold. This is working in Chrome, but not in IE8. Also, o verify why its not working, I was trying to inspect the element, I did find this style rule there. Hope this is clear.

Is there any other solution to this?

Archana
  • 253
  • 7
  • 25
  • 7
    Which class? Your selector has no class in it. – brenjt Jun 03 '15 at 14:59
  • 1
    @Archana Your code does work in IE. See this --> http://jsfiddle.net/ppxpj69x/ . Check this in IE. – Satwik Nadkarny Jun 03 '15 at 15:37
  • 2
    IE8 doesn’t support `:checked`. You can only get around this with JavaScript. – Ry- Jun 03 '15 at 16:04
  • In regard to your question, something like [Modernizr](http://modernizr.com/) may add support for this in non-compliant browsers. It [may not be worth messing with it](http://www.allwebcafe.com/blog/time-to-drop-support-for-ie8/) if it takes more than a quick shim. At this stage, only [10% of your total market uses IE 8](http://www.theie8countdown.com/), with usage dropping every month. Like its predecessors, the vendor itself (Microsoft) is actively working to remove it, so supporting it has little return on the investment of time. – Chris Baker Jun 03 '15 at 16:07
  • 2
    http://caniuse.com/#feat=css-sel3 – putvande Jun 03 '15 at 16:08

2 Answers2

0

Like it was mentioned, IE8 does not support :checked, thus a solution can be using JavaScript, such as this:

<!DOCTYPE html>
<html>
<body>

    <style>
        /*
        input[type="checkbox"]:checked + span {
font-weight:bold;
}*/
    </style>
    <label>
        <input onchange="on_click()" type="checkbox" name="Hello" id="Hello"/>
        <span id ="hello">Hello</span>
    </label>

    <script>
        count = 0;
        function on_click() {
            var hello = "Hello";
            count = count + 1;
            if (count % 2 == 0) {
                document.getElementById("hello").innerHTML = hello;

            } else {

                document.getElementById("hello").innerHTML = hello.bold();
            }
        }
    </script>
</body>

Hopefully this helps!

Jordan Goulet
  • 171
  • 3
  • 9
0

since you're only option is to do it with javascript,you can do something like this(if you want to use jquery):

function checkboxIscheckedHandler(el) {
    var _this = $(el);
    if (_this.checked)
        _this.next('span').css("font-weight", "bold");
    else
        _this.next('span').css("font-weight", "normal");
}

and you just add this function to every checkbox's onchange property like this 

<input type="checkbox" onchange="checkboxIscheckedHandler(this)" name="Hello" id="Hello"/>
roostaamir
  • 1,928
  • 5
  • 24
  • 51