Восстановите контур Chrome/Safari/Firefox/IE8+ на всех элементах фокуса

Question

Мы используем некоторые библиотеки JavaScript, которые включают страшные :focus {outline: none;}, Я не хочу связываться с библиотеками, потому что при следующем обновлении библиотеки мой код будет потерян.

Например (увы, не единственная такая библиотека), FlexSlider имеет следующий код:

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

Я вижу, что в поле ввода есть пост CSS Restore Webkit, и мы фактически используем этот код.

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

Тем не менее, это оставляет наших посетителей Firefox и IE без контуров. Как сделать кросс-браузерное восстановление контуров в моем файле CSS?

Я думаю, что мог бы использовать jQuery для удаления проблемного правила, но это может нарушиться, если они изменят свою библиотеку и не помогут посетителям, у которых отключен JavaScript.

Я также думал, что смогу сделать:

*:focus
  { outline: inherit !important; }

но он задавался вопросом, могут ли быть непредвиденные последствия, как в браузере, имеющем разные стили контура для разных тегов.

Вы можете увидеть это в действии на домашней странице Агентства муниципального транспорта Сан-Франциско в ползунке справа от темно-зеленой области.

Answer 1

Нашел в Bootstrap

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

Не уверен насчет контура со смещением; это может быть стилистическим решением.