Сделать контур фокуса CSS легче видеть в Chrome

Question

Я пытаюсь использовать навигацию вкладок на веб-сайте. Когда он окружает изображения, контур по умолчанию в Chrome может быть очень легким, и, таким образом, трудно понять:

Я играл с возможными значениями для свойства CSS outline, но ни один из них не имеет приятное «свечение», как схема по умолчанию, ширина которой я не могу контролировать, даже с outline-width.

Я сумел подражать "более очевидный план" с коробкой тень:

*:focus { 
    outline: none; 
    box-shadow: 0 0 10px 5px blue; 
    position: relative; 
} 

Однако это решение имеет две проблемы:

1. элементов, возможно, требуется специальное позиционирование, так что «контур» будет отображаться над соседними следующими элементами документа (отсюда position: relative), который не будет работать в общем случае, так как неизбежно некоторый элемент собирается должны быть position: absolute, и т.д.
2. Термин «контур» это очевидно, было бы оскорбительным по умолчанию для пользователей мыши.

Поэтому я хотел бы знать, есть ли настройка браузера, чтобы облегчить мне схему, и что (желательно) не будет мешать стилям страницы.

Answer 1

Это не поможет вам сегодня, но CSS4 имеет :focusring селектор приходя (хотя его название может измениться):

:focusring только соответствует элементу, если элемент в настоящее время сосредоточены и кольцо фокусировки или другой индикатор должен быть составлен для этого элемента. Это чрезвычайно полезно для доступности.

По существу он предназначен для использования на клавиатуре и для случаев, когда фокус программно перемещается в элемент (например, что-то, что могло бы иметь tabindex=-1).

Подробнее: https://github.com/w3c/csswg-drafts/pull/709

Это based on :-moz-focusring.

Насколько я знаю, еще нет pollyfill.

В то же время есть открытые проблемы с браузерами (извините, их не удается найти прямо сейчас), чтобы сделать стили фокуса по умолчанию более заметными.

Но это также не поможет вам сегодня.

Я знаю, что некоторые люди используют устройство чтения с экрана, с включенными индикаторами фокусировки, чтобы увидеть, где они находятся на странице. Это может быть полезно вам как пользователю, а не автору. NVDA (бесплатно) позволяет это, например, с помощью подключаемого модуля.

Answer 2

• Chrome использует "авто" контурный стиль (outline: auto 2px -webkit-focus-ring-color;)

Это, к сожалению, также отменяет outline-offset стандартного значения

Вы можете переопределить это значение только как переопределение outline и outline-offset:

outline: solid 2px rgba(77, 144, 254, 0.4); 
outline-offset: 2px; 

• Второе решение, чтобы добавить отступы вокруг каждого изображения:

Например, добавляя 2px белого пространства между вокруг изображения:

a img {padding:2px} 

С этим решением, вы не» t переопределить индикатор фокуса фокуса по умолчанию

• Другое решение, используя пунктирные или пунктирные линии с полупрозрачным co Lors

Например .:

a.img:focus {outline:dotted rgba(150,200,250,0.8) 2px} 
<a href="..." class="img"><img ... 

a.img:focus {outline:dashed rgba(150,200,250,0.5) 2px}