1

Can anyone tell me why button focus borders are rendered with a black dashed border by default in IE11 and with a blue solid border in Chrome? You can see this if you go to http://angular-ui.github.io/ and tab over the Site/Code buttons with IE11 and Chrome.

I've tried various overrides like -webkit-appearance:none etc to no avail. Is this an AngularUI bug, or a browser quirk everybody knows about and have been working around that I'll need to special-case if I want the look to be uniform?

Benji L.
  • 197
  • 11
  • If your looking to just disable the focus border altogether then you can just add this to the class targeting the buttons `outline: none;` – Lbatson Jun 25 '14 at 14:22

2 Answers2

1

When you tab over the button, you are applying the element's :focus styling. Looking at the stylesheet which is being used, I cannot see any custom styling for this, so the browser is providing it's default focus styling.

If you want to override this, then you can write your own focus style. So for this particular button, you can use:

a.btn.btn-primary.btn-large:focus{
    outline: 0;
    /* add other styling to it */
}

Or if you want to just target all anchors on the page, then use

a:focus{
    outline: 0;
}
Tim B James
  • 20,084
  • 4
  • 73
  • 103
  • Why do you hate keyboards? :( (I'm joking, ofcourse, but it should be noted that removing the border on focus does not help usability along) – Duroth Jun 25 '14 at 14:39
  • yeah I wouldn't remove it ;) – Tim B James Jun 25 '14 at 14:40
  • Ok, I wasn't sure if it was browser default styling or I was losing my mind. You would think Angular/Bootstrap would have a consistent cross-browser override instead of relying on the inconsistent browser default but whatever. Thanks! – Benji L. Jun 25 '14 at 20:45
  • Ended up having to do the following to get something that mimicked the Webkit style and also was visually consistent across both browsers: `//Have to manually set button focus shadow to ensure uniform behavior across browsers. button:focus { outline: 0 !important; border-color: #66afe9 !important; -webkit-appearance: none !important; -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.6) !important; box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.6) !important; }` – Benji L. Jun 25 '14 at 22:08
  • if you're using Bootstrap and LESS as I am, you can hijack the input highlight function and do this which is even more concise: `button { .form-control-focus !important; }` – Benji L. Jun 26 '14 at 22:41
0

Angular is adding the dotted lines on this occasion - to remove, do this in your CSS;

.btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active {
         outline: 0;
}
Nikki Mather
  • 1,118
  • 3
  • 17
  • 33