IE9 Checkbox rendering oddity on focus

Question

Check the screenshot. You'll notice that the checkbox that has focus is actually rendering differently from the other checkboxes. What would make it appear this way in IE9?

I've got the following CSS snippet, and I've noticed only that if I remove ALL of the following CSS this issue no longer happens. But if I just remove any one or two of these rules it will still happen. I'm baffled.

textarea:active,
textarea:focus,
textarea:active:hover,
textarea:focus:hover,
select:active,
select:focus,
select:active:hover,
select:focus:hover,
input:active,
input:focus,
input:active:hover,
input:focus:hover{
    background-color:#f9f9f5;
    border-color:#658cae;
    -webkit-box-shadow:inset 0 1px 2px #b8b7b3, 0 0 8px #7899b5;
    -moz-box-shadow:inset 0 1px 2px #b8b7b3, 0 0 8px #7899b5;
    box-shadow:inset 0 1px 2px #b8b7b3, 0 0 8px #7899b5;

    z-index:1;/* for Opera */
}
input[type="file"]:focus,
input[type="file"]:active,
input[type="radio"]:focus,
input[type="radio"]:active,
input[type="checkbox"]:focus,
input[type="checkbox"]:active {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
input[type="file"]:focus,
input[type="file"]:active,
input[type="file"][disabled],
input[type="radio"]:focus,
input[type="radio"]:active,
input[type="radio"][disabled],
input[type="checkbox"]:focus,
input[type="checkbox"]:active,
input[type="checkbox"][disabled]{
    background-color:transparent;
}

Here's a live Demo: http://jsfiddle.net/QRzRw/1/

Answer 1

This is the evil part:

input:focus,
input:active:hover,
input:focus:hover{
  background-color:#f9f9f5;
  border-color:#658cae;
}

It seems, once you made this setting, it can't be undone by assigning transparent or inherit.

Looks like you have to add these styles for all input[type=...] tags, except those for type checkbox.

Answer 2

Internet Explorer, by default, uses Windows form controls for HTML forms. These are standard, styled exactly like they would be in any Windows application... until you try and apply styles to them manually.

This can be demonstrated with an ordinary text input. If you try and set the background-color property, the overall style of the input element will change along with it, because Internet Explorer switches from the standard Windows form control to a custom form control. For your convenience, I've set up that demo here.

Other versions of Internet Explorer behave the same way. A possible workaround would be to target the CSS toward non-IE browsers only, using a method like Paul Irish's conditional CSS classes.