css – IE9复选框在焦点上呈现奇怪

我有以下CSS片段,我只注意到如果我删除以下所有CSS这个问题不再发生.但是,如果我只删除这些规则中的任何一个或两个,它仍然会发生.我很困惑.

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"][disabled],input[type="radio"][disabled],input[type="checkbox"]:active,input[type="checkbox"][disabled]{
    BACkground-color:transparent;
}

这是一个现场演示：http://jsfiddle.net/QRzRw/1/

解决方法

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