CODEWITHSUNDEEP
javascripthtmlcssinternet-explorer
Shane
Shane

Reputation: 5677

Checkbox issue in IE

Checked property not working IE8, Below is code: 

.chkBox {
    padding: 20px 4px 10px 11px;
}

.chkBox input[type="checkbox"]{
    display: none;
}
.chkBox input[type="checkbox"]+label span{
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    background-color: white;
    border:2px solid black;
    cursor: pointer;
    margin-right:5px;
}
.chkBox input[type="checkbox"]:checked+label span{
    background-color:#000000;
    background-image: url(checkmarktick.png);
    background-repeat: no-repeat;
    background-position-x: 3px;
    background-position-y: 3px;

}

.chkBox label {
    color: #8c8c8c;
}

HTML Code

 <div class="chkBox">
    <input type="checkbox" id="hello" />
    <label for="hello"><span></span>Hello</label>
 </div>

Fiddle to play around https://jsfiddle.net/09tnf1bL/embedded/result/

I almost tried with every other plugins like slevtizr, IE7 and checked-pollyfill but none work. Can anyone let me how to fix this issue.

Upvotes: 3

Views: 503

Answers (1)

Spudley
Spudley

Reputation: 168655

IE8 does not support the :checked CSS selector. It was only added to IE9.

See here for a full browser support table for this and other selectors.

There are two work-arounds you could use:

  1. Use [checked] instead. This will select elements with an attribute of checked.

  2. Use a library like Selectivizr to polyfill IE8 with support for this and other newer CSS selectors.

Upvotes: 1

Related Questions