Кольцо фокусировки
Вспомогательные классы, позволяющие добавлять и изменять пользовательские стили кольца фокусировки для элементов и компонентов.
Помощник .focus-ring удаляет outline по умолчанию для :focus, заменяя его box-shadow, который можно настроить более широко. Новая тень состоит из ряда переменных CSS, унаследованных от уровня :root, которые можно изменить для любого элемента или компонента.
Пример
Нажмите непосредственно на ссылку ниже, чтобы увидеть кольцо фокусировки в действии, или в примере ниже, а затем нажмите Tab.
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
Специальное кольцо фокусировки
</a>Кастомизация
Измените стиль кольца фокусировки с помощью наших переменных CSS, переменных Sass, утилит или пользовательских стилей.
CSS переменные
При необходимости измените переменные CSS --bs-focus-ring-*, чтобы изменить внешний вид по умолчанию.
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-color: rgba(var(--bs-success-rgb), .25)">
Зеленое кольцо фокусировки
</a>.focus-ring устанавливает стили через глобальные переменные CSS, которые можно переопределить для любого родительского элемента, как показано выше. Эти переменные генерируются из их аналогов переменных Sass.
--#{$prefix}focus-ring-width: #{$focus-ring-width};
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
--#{$prefix}focus-ring-color: #{$focus-ring-color};По умолчанию нет --bs-focus-ring-x, --bs-focus-ring-y или --bs-focus-ring-blur, но мы предоставляем переменные CSS с запасными вариантами. к начальным значениям 0. Измените их, чтобы изменить внешний вид по умолчанию.
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-x: 10px; --bs-focus-ring-y: 10px; --bs-focus-ring-blur: 4px">
Размытое смещенное кольцо фокусировки
</a>Sass переменные
Настройте переменные кольца фокусировки Sass, чтобы изменить все использование стилей кольца фокусировки в вашем проекте на базе Bootstrap.
$focus-ring-width: .25rem;
$focus-ring-opacity: .25;
$focus-ring-color: rgba($primary, $focus-ring-opacity);
$focus-ring-blur: 0;
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color;
Sass API утилиты
Помимо .focus-ring, у нас есть несколько утилит .focus-ring-* для изменения значений по умолчанию вспомогательного класса. Измените цвет с помощью любого из наших цветов темы. Обратите внимание, что светлые и темные варианты могут быть видны не на всех цветах фона, учитывая текущую поддержку цветового режима.
<p><a href="#" class="d-inline-flex focus-ring focus-ring-primary py-1 px-2 text-decoration-none border rounded-2">Primary фокус</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-secondary py-1 px-2 text-decoration-none border rounded-2">Secondary фокус</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-success py-1 px-2 text-decoration-none border rounded-2">Success фокус</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-danger py-1 px-2 text-decoration-none border rounded-2">Danger фокус</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-warning py-1 px-2 text-decoration-none border rounded-2">Warning фокус</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-info py-1 px-2 text-decoration-none border rounded-2">Info фокус</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-light py-1 px-2 text-decoration-none border rounded-2">Light фокус</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-dark py-1 px-2 text-decoration-none border rounded-2">Dark фокус</a></p>Утилиты кольца фокусировки объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.
"focus-ring": (
css-var: true,
css-variable-name: focus-ring-color,
class: focus-ring,
values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
),