Strange border on tabIndex on
element

Question

I'm currently trying to make some show/hide content more accessible on a large site (in excess of 30,000 pages) and I've come across a weird bug when adding tabindex where a dotted border appears when clicking on the control to open the hidden content.

The set up with p tag which you click to fadeIn a div which shows the hidden content. I can't modify the HTML at all due to there being thousands of these across the site so this is what I have to work with. At the moment to add tabindex i'm doing it dynamically with jQuery, adding an ever increasing tab index to each p tag.

My first though to get rid of this weird border was to try CSS:

#content div.showHide p.showHideTitle:focus, 
#content div.showHide p.showHideTitle::focus, 
#content div.showHide p.showHideTitle::-moz-focus-border {
    outline: 0px !important; border: 0px !important;
}

This works in Chrome and Safari but in IE8 and Firefox 3.6 I still get the border when I click on the p tag. Any suggestions for how to get rid of it?

I don't get it. How does hiding the outline to stop keyboard only users knowing where the focus is help with accessibility? — Alohci, Jun 01 '11 at 15:28

score 23 · Accepted Answer · answered Jun 01 '11 at 15:04

23

whats about:

#content div.showHide p.showHideTitle {
    outline: none !important; 
}

You are setting the outline style for the pseudo class :focus but this may be "to late". Here a simple jsFiddle

answered Jun 01 '11 at 15:04

DanielB

19,910
2
44
50

score 7 · Answer 2 · answered Feb 05 '14 at 23:59

7

I have a better solution to this issue, hybrid javascript/css.

$('[tabindex]').focus(function()
{
    $(this).css('outline', 'none');
});
$('[tabindex]').keyup(function (event)
{
    if(event.keyCode == 9)
    {
        $(this).css('outline', '');
    }
});

This way it still works if you tab through, but not if you click.

answered Feb 05 '14 at 23:59

James McDonnell

3,600
1
20
26

1

+1 This is wonderful. Just what I needed. Still want `[tabindex]` to highlight when tabbing, but it really is annoying for togglers to get that annoying outline when mouse-clicking. This will go into my bag-o-tricks! – Phil Tune Oct 17 '14 at 19:14

score 6 · Answer 3 · answered Oct 29 '13 at 16:17

6

Although not the most efficient CSS selector by any means you can remove this from all DOM elements with tabindex attributes just the following CSS:

[tabindex] {
   outline: none !important;
}

answered Oct 29 '13 at 16:17

Aran

2,429
1
19
19

score 0 · Answer 4 · answered Feb 14 '19 at 09:20

0

But, the user should see the outline when focused by tab press.

answered Feb 14 '19 at 09:20

Shrishail Uttagi

406
6
8

score 0 · Answer 5 · answered Jun 01 '11 at 15:02

0

Have you tried setting the css with your script? Something like

$("#content div.showHide p.showHideTitle").focus(function () {
     $(this).css('border','0');
});

answered Jun 01 '11 at 15:02

Jason Gennaro

34,535
8
65
86

score -1 · Answer 6 · answered Oct 18 '20 at 06:13

-1

<div class="className" tabIndex="1" style={{outline: 0}}>
    <p> Try this... I hope this works!</p>
<div>

answered Oct 18 '20 at 06:13

cool

327
1
6
14

A written explanation as to why this may work where other answers have failed would be appreciated. – Pro Q Oct 18 '20 at 08:25

Strange border on tabIndex on element

6 Answers6

Strange border on tabIndex on
element