复选框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>

在“x-form-cb-label”周围出现文档模式怪异模式（页面默认）虚线。

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

CSS修改根本没有帮助。

所以，有两个问题：

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

Answer 1

是的，正如您所怀疑的那样，outline位于您所在领域的label附近。

隐藏outline的代码无法正常工作的原因是因为您在字段中指定了大纲，而不是标签。

（虽然考虑到你向我们展示的代码，我想知道为什么它是一个空白而不是说XXXX XXXX？）

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

label {
    outline: 0;
}

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

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

Answer 2

试试这个

label:focus
{
    outline:none;
}

Answer 3

我使用了像style='background:#fff;border:none;'这样的CSS，并且它可以正常删除ie9中复选框周围的边框。