复选框 IE9 附近的虚线边框

Question

我使用 EXT.Js 框架，但遇到了 IE9 的问题（在 IE8 和以前的版本中都可以正常工作）：单击它时，所有复选框附近都有虚线边框。 我试图在主css文件中设置：

body.ext-ie input{
    outline: none;
}

但它不起作用。

我认为它与我的复选框相关联的标签有关，但我真的不知道如何修复它。

我的问题的一个例子：

生成此复选框的 ExtJs 代码是：

{
    fieldLabel: 'XXXX XXXX',    
    name: 'XXXX',                
    xtype: 'checkbox',    
    disabled: !isXXXXX}

这里有一个 css 文件：css file

UPD 1

我已将 ExtJS 文件更正如下：JS：

items [{
    fieldLabel: 'xxx',    
    name: 'xxx',                
    xtype: 'checkbox', 
    style: {outline: 'none'}, 
    onfocus: function() {this.style.outline = "none"; }
 }]

它生成以下 html：

<div class="x-form-check-wrap" id="ext-gen271" style="width: 180px;">
  <input type="checkbox" autocomplete="off" id="ext-comp-1161" name="persistentRecoveryEnabled" class=" x-form- 
 checkbox x-form-field" style="outline: none;" checked="">
  <label for="ext-comp-1161" class="x-form-cb-label" id="ext-gen272">&nbsp;</label>
</div>

在文档模式Quirks Mode(Page default) 虚线出现在“x-form-cb-label”周围。

在文档模式下 IE9 标准虚线不会出现此设置。

CSS 修改根本没有帮助。

那么，有两个问题：

1. 如何通过JS给class="x-form-cb-label"设置样式？
2. 如何通过 JS 将文档模式 IE9 标准设置为页面默认值？ （html由ExtJS生成）

Answer 1

是的，正如您所怀疑的，它是您领域的 label 周围的 outline。

隐藏outline 的代码不起作用的原因是因为您将大纲指定为字段，而不是标签。

（虽然给出了您向我们展示的代码，但我想知道为什么它是一个空格而不是说XXXX XXXX？）

如果你想隐藏它，你应该使用label作为你的选择器而不是input：

label {
    outline: 0;
}

不过，在您这样做之前，值得指出的是，当前选定字段周围的虚线轮廓对于某些用户来说是一项重要功能。特别是，不能使用鼠标的残疾用户在使用键盘导航网站时依赖它，以便他们知道他们在页面上的位置。

如果您隐藏，您将主动歧视这些用户。 （取决于您的网站受众，这对您来说可能并不特别重要，但请注意在某些国家/地区这是非法的）

Answer 2

试试这个

label:focus
{
    outline:none;
}

Answer 3

我使用了 style='background:#fff;border:none;' 之类的 css，它可以很好地去除 ie9 中复选框周围的边框。