CODEWITHSUNDEEP
htmlcsscheckboxinternet-explorer-9
Symfony
Symfony

Reputation: 2439

Checkbox CSS rule doesn't apply in Internet Explorer 9

My code for changing background of checkbox:

.question11 input[type=checkbox] + label {
    display: block;
    height: 16px;
    padding-left: 25px;
    background: url(images/bg.gif) top left no-repeat;
}

The problem is it's not working with Internet Explorer 9.0.4.

Upvotes: 0

Views: 4418

Answers (4)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201548

The rule does not set any properties on any checkbox. It only applies to label elements in a specific context, and that’s how it works, on IE 9 and other browsers.

If you would like a rule to apply to any checkbox element that is immediately followed by a label element (as I guess), then you would need a different kind of selector—something that does not seem to exist in the CSS Selectors Level 4 draft, still less as supported. So you would need to add some markup, like class attributes for checkboxes.

Upvotes: 1

Symfony
Symfony

Reputation: 2439

Try like this

.chh {

background-image: url(images/checkbox_bg.gif);}

 if(document.getElementById(id+ii).checked==true){
   document.getElementById(id+ii).className==chh;
                    }

First write css then apply javascript function

Upvotes: 0

doptrois
doptrois

Reputation: 1570

Juhana is right.

The other problem is, you can't style checkboxes 100% individual via CSS only.
There are great plugins for it, so you can completely replace the checkboxes etc. via images.

--> Uniform - sexy forms with jQuery for example.

Upvotes: 2

JJJ
JJJ

Reputation: 33163

The CSS selector is too complex for IE. The easy solution is to give a class or id to the checkbox and the label if you can change the HTML.

<input type="checkbox" class="foo"><label class="foo">...</label>

.question11 .foo {
  ...
}

Upvotes: 2

Related Questions