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.