Search code examples
cssextjscheckboxinternet-explorer-9outline

Dotted border near checkbox IE9

I use EXT.Js framework and i got an issue with IE9(in IE8 and previous versions all works fine): a dotted border near all checkboxes when click on it. I tried to set in main css file:

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

But it does not work.

I think its about a label associeted with my checkbox, but i don't really know, how to fix it.

An example of my issue:

wrong behavior in red

ExtJs code, that generate this checkbox is:

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

A css file is available here: css file

UPD 1

I've corrected the ExtJS file as below: JS:

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

it generetes the following 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>

in a Document Mode Quirks Mode(Page default) dotted line appears around the "x-form-cb-label".

in a Document Mode IE9 Standarts dotted line doesn't appear with this settings.

CSS modification doesn't help at all.

So, there are two questions:

  1. how to set a style to the class="x-form-cb-label" via JS?
  2. how to set Document Mode IE9 Standarts as Page Default via JS? (html is genereted by ExtJS)
Solution

  • Yes, as you suspect, it's an outline around the label of your field.

    The reason your code to hide the outline isn't working is because you're specifying the outline one the field, not the label.

    (though given the code you've shown us, I wonder why it's a blank space rather than saying XXXX XXXX?)

    If you want to hide it, you should use label as your selector rather than input:

    label {
    outline: 0;
}

    Before you do that though, it's worth pointing out, that the dotted outline around the currently selected field is an important feature for some users. In particular, disabled users who can't use a mouse rely on it when navigating a site using the keyboard so that they can tell where they are on a page.

    If you hide, it you will be actively discriminating against those users. (depending on your site audience this may not particularly matter to you, but beware that it is illegal in some countries)