Bordure en pointillés près de la case à cocher IE9

Question

J'utilise le framework EXT.Js et j'ai un problème avec IE9 (dans IE8 et les versions précédentes tout va bien): une bordure pointillée près de toutes les cases à cocher lorsque vous cliquez dessus. J'ai essayé de mettre dans le principal fichier css:

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

Mais cela ne fonctionne pas.

Je pense que c'est à propos d'une étiquette associée à ma case à cocher, mais je ne sais pas vraiment, comment y remédier.

Un exemple de ma question:

Code ExtJs, qui génèrent cette case à cocher est:

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

Un fichier css est disponible ici: css file

UPD 1

J'ai corrigé le fichier ExtJS comme ci-dessous: JS:

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

il generetes le code html suivant:

<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> 

en mode mode Quirks document (Page par défaut) la ligne en pointillés apparaît autour de la " x-form-cb-label ". En mode Document IE9, la ligne pointillée Standarts n'apparaît pas avec ce paramètre.

La modification CSS ne aide pas du tout.

Donc, il y a deux questions:

1. comment définir un style à la class="x-form-cb-label" via JS?
2. comment régler le mode document IE9 Standarts en tant que page par défaut via JS? (Html ​​est genereted par ExtJS)

Answer 1

Oui, comme vous le pensez, il y a un outline autour du label de votre champ.

La raison pour laquelle votre code pour masquer le outline ne fonctionne pas est que vous spécifiez le contour du champ, pas l'étiquette.

(? Mais étant donné le code que vous nous avez montré, je me demande pourquoi il est un espace vide plutôt que de dire XXXX XXXX)

Si vous voulez cacher, vous devez utiliser label comme sélecteur plutôt que input:

label { 
    outline: 0; 
} 

Avant de faire cela cependant, il est intéressant de souligner que les grandes lignes en pointillés autour du champ actuellement sélectionné est un élément important pour certains utilisateurs. En particulier, les utilisateurs désactivés qui ne peuvent pas utiliser une souris en dépendent lorsqu'ils naviguent sur un site à l'aide du clavier afin de savoir où ils se trouvent sur une page.

Si vous le cachez, vous serez activement discriminé contre ces utilisateurs. (En fonction de votre public du site cela ne peut pas particulièrement d'importance pour vous, mais méfiez-vous qu'il est illégal dans certains pays)

Answer 2

Essayez cette

label:focus 
{ 
    outline:none; 
} 

Answer 3

je css comme style='background:#fff;border:none;' et il a bien fonctionné pour enlever la frontière autour des cases à cocher dans ie9.