Сделать более очевидным, чтобы сказать, какой элемент находится в фокусе при переходе между элементами

Question

В Firefox есть пунктирная граница вокруг элемента, когда он имеет фокус. Иногда я нахожу это невозможным. Какие настройки Firefox мы можем использовать, чтобы сделать фокус более очевидным.

Обратите внимание, что я хочу сделать это через настройку Firefox, НЕ редактируя CSS сайта.

Например, в SuperUser, когда кнопки «Вопросы», «Теги», «Пользователи», «Значки» или «Без ответа» находятся в фокусе, пунктирная граница полностью не видна. Как я могу сделать границу, скажем, принести розовый или красный и шириной 5 пикселей?

В настоящее время ссылка Вопросы находится в фокусе. Нет никакого способа сказать, что это находится в фокусе от цветовой схемы веб-сайта.

Я бы предпочел, чтобы в фокусе это выглядело, изменив некоторые настройки Firefox.

Answer 1

Вы можете определить свои собственные стили по умолчанию, добавив их в <каталог профиля Firefox>\chrome\usercontent.css. Любые сделанные вами изменения вступят в силу при следующем запуске профиля (поэтому, если вы используете его во время редактирования этого файла, вам придется перезапустить его).

Добавив следующее в usercontent.css моего профиля:

:focus {
  outline: #FF5500 dashed 2px;
}

Я получаю следующее:

---

---

Несколько заметок:

• usercontent.css определяет только стили по умолчанию, которые используются, когда на веб-странице не определены конфликтующие стили. Таким образом, это работает в тех случаях , когда фокус контур спрятанные на случай непредвиденных причины (такие , как использование изображения кнопок, как на этой странице), но это не будет работать , если веб - сайт автор намеренно определил стиль CSS , который отключает контур фокусировки либо для данного элемента, либо для всей веб-страницы. Повсеместно считается плохой практикой отключать контур фокуса, не определяя альтернативные способы различения сфокусированного элемента, но, к сожалению, это слишком распространено.

• Если вы не видите подкаталог chrome в каталоге профиля и / или не видите файл usercontent.css в этом подкаталоге, просто создайте их.

• Вы можете найти каталог профиля, введя about:support в адресную строку (или выбрав пункт « Устранение неполадок» в меню « Справка» ), а затем нажав кнопку « Показать папку» в разделе « Основные сведения о приложении ».

Answer 2

Вы можете использовать Стильный, чтобы установить другой стиль фокуса. Что-то вроде этого:

:focus {
    outline: 3px solid red;
}

Результат будет выглядеть так: