IE9复选框呈现奇数焦点

问题描述

| 检查屏幕截图。您会注意到，具有焦点的复选框实际上在渲染上与其他复选框不同。是什么使它在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:active:hover,input:focus:hover{
  background-color:#f9f9f5;
  border-color:#658cae;
}

似乎，一旦您进行了此设置，就无法通过分配

transparent

或

inherit

撤消它。 看起来您必须为所有

input[type=...]

标签添加这些样式，但类型复选框除外。     ,默认情况下，Internet Explorer将Windows表单控件用于HTML表单。这些是标准的样式，就像在任何Windows应用程序中一样，直到您尝试手动将样式应用于它们为止。 这可以通过普通文本输入来演示。如果尝试设置“ 5”属性，则输入元素的整体样式将随之变化，因为Internet Explorer从标准Windows窗体控件切换到自定义窗体控件。为了您的方便，我在此处设置了该演示。 其他版本的Internet Explorer行为相同。一种可能的解决方法是，使用Paul Irish的条件CSS类之类的方法，将CSS仅面向非IE浏览器。     ,一位朋友帮我解决了这个问题，他发现在复选框上设置边框或背景色会由于某种奇怪的原因而使它呈现那样的颜色。 NGLN是正确的，我会接受他的回答。我必须将CSS更改为以下内容才能起作用：

textarea,select,input[type=\"email\"],input[type=\"number\"],input[type=\"password\"],input[type=\"search\"],input[type=\"tel\"],input[type=\"text\"]{
    font-family:\'ColaborateRegular\';
    background-color:#efefeb;
    border:1px solid;
    border-color:#89969f #89969f #cbcbc8 #89969f;
    outline: 0;
    padding:3px;
    width: 100%;
    margin-bottom:10px;

    -webkit-box-shadow:inset 0 1px 2px #b8b7b3;
    -moz-box-shadow:inset 0 1px 2px #b8b7b3;
    box-shadow:inset 0 1px 2px #b8b7b3;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;

    -webkit-appearance: none;

    -webkit-transition:background-color 0.4s,border-color 0.4s;
    -moz-transition:background-color 0.4s,border-color 0.4s;
    -ms-transition:background-color 0.4s,border-color 0.4s;
    -o-transition:background-color 0.4s,border-color 0.4s;
    transition:background-color 0.4s,border-color 0.4s;
}
input[type=\"radio\"],input[type=\"checkbox\"]{
    margin:0 2px 0 0;
}
textarea:hover,select:hover,input[type=\"email\"]:hover,input[type=\"number\"]:hover,input[type=\"password\"]:hover,input[type=\"search\"]:hover,input[type=\"tel\"]:hover,input[type=\"text\"]:hover{
    -webkit-box-shadow:inset 0 1px 2px #b8b7b3,0 0 5px #7899b5;
    -moz-box-shadow:inset 0 1px 2px #b8b7b3,0 0 5px #7899b5;
    box-shadow:inset 0 1px 2px #b8b7b3,0 0 5px #7899b5;
}
textarea:active,textarea:focus,textarea:active:hover,textarea:focus:hover,select:active,select:focus,select:active:hover,select:focus:hover,input[type=\"email\"]:active,input[type=\"email\"]:focus,input[type=\"email\"]:active:hover,input[type=\"email\"]:focus:hover,input[type=\"number\"]:active,input[type=\"number\"]:focus,input[type=\"number\"]:active:hover,input[type=\"number\"]:focus:hover,input[type=\"password\"]:active,input[type=\"password\"]:focus,input[type=\"password\"]:active:hover,input[type=\"password\"]:focus:hover,input[type=\"search\"]:active,input[type=\"search\"]:focus,input[type=\"search\"]:active:hover,input[type=\"search\"]:focus:hover,input[type=\"tel\"]:active,input[type=\"tel\"]:focus,input[type=\"tel\"]:active:hover,input[type=\"tel\"]:focus:hover,input[type=\"text\"]:active,input[type=\"text\"]:focus,input[type=\"text\"]:active:hover,input[type=\"text\"]: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 */
}

    ,我知道已经回答了，但是我相信我有一个更好的解决方案。我似乎在IE 8 + 9中得到了相同的结果

<!--[if gte IE 8]>
<style type=\"text/css\">
input[type=\"checkbox\"] {
     outline:0;border:0;
}
</style>
<![endif]-->