1

We are using some JavaScript libraries that include the dreaded :focus {outline: none;}. I don't want to mess with the libraries because the next time I upgrade the library, my code will be lost.

For example (alas, not the only such library), FlexSlider has the following code: 

.flex-container a:hover, 
.flex-slider a:hover, 
.flex-container a:focus, 
.flex-slider a:focus  
  { outline: none; }

I see that there is a post Restore Webkit's CSS outline on input field, and we in fact use that code. 

:focus 
  { outline: auto 5px -webkit-focus-ring-color; }

However, that leaves our Firefox and IE visitors without outlines. How do I do a cross-browser outline restoration in my CSS file?

I'm thinking I could use jQuery to excise the problematic rule, but that's subject to breaking if they change their library, and won't help visitors who have JavaScript disabled.

I was also thinking I could do:

*:focus
  { outline: inherit !important; }

but was wondering if there might be unintended consequences, as in a browser having different outline styles for different tags.

You can see this in action on the San Francisco Municipal Transportation Agency home page in the slider to the right of the dark green area.

Community
  • 1
  • 1
Charles Belov
  • 543
  • 1
  • 4
  • 9

1 Answers1

0

Found it in Bootstrap 

a:focus { 
  outline: thin dotted; 
  outline: 5px auto -webkit-focus-ring-color; 
  outline-offset: -2px; 
}

Not sure about the outline-offset one; that may be a stylistic decision.

Charles Belov
  • 543
  • 1
  • 4
  • 9