Пунктирная граница возле checkbox 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"; } 
}] 

это generetes следующий 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> 

в режиме Document Mode Quirks (страница по умолчанию) появляется пунктирная линия вокруг " х форм-Си-Би-лейбл».

в режиме документа IE9 Стандартная пунктирная линия не отображается с этими настройками.

Изменение CSS совсем не помогает.

Итак, есть два вопроса:

1. как установить стиль в class="x-form-cb-label" через JS?
2. Как установить режим документа IE9 Стандарты как страница по умолчанию через JS? (HTML является genereted по ExtJS)

Answer 1

Да, как вы подозреваете, что это outline вокруг label вашего поля.

Причина, по которой ваш код, чтобы скрыть outline, не работает, потому что вы указываете контур как поле, а не метку.

(? Хотя, учитывая код, который вы показали нам, интересно, почему это пустое пространство, а не говоря XXXX XXXX)

Если вы хотите, чтобы скрыть это, вы должны использовать label в качестве селектора, а не input:

label { 
    outline: 0; 
} 

Прежде чем сделать это, хотя, это стоит отметить, что пунктирная контур вокруг выбранного поля является важной особенностью для некоторых пользователей. В частности, отключенные пользователи, которые не могут использовать мышь, полагаются на нее при навигации по сайту с помощью клавиатуры, чтобы они могли указать, где они находятся на странице.

Если вы спрячете, вы будете активно различать эти пользователи. (В зависимости от аудитории сайта это не особенно важно для вас, но учтите, что это является незаконным в некоторых странах)

Answer 2

Попробуйте

label:focus 
{ 
    outline:none; 
} 

Answer 3

Я использовал CSS как style='background:#fff;border:none;' и это работало отлично для удаления границы вокруг флажков в ie9.