Перейти к основному содержанию Перейти к навигации по документации
Добавлено в v5.3 На GitHub

Кольцо фокусировки

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

Помощник .focus-ring удаляет outline по умолчанию для :focus, заменяя его box-shadow, который можно настроить более широко. Новая тень состоит из ряда переменных CSS, унаследованных от уровня :root, которые можно изменить для любого элемента или компонента.

Пример

Нажмите непосредственно на ссылку ниже, чтобы увидеть кольцо фокусировки в действии, или в примере ниже, а затем нажмите Tab.

html
<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-*, чтобы изменить внешний вид по умолчанию.

html
<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. Измените их, чтобы изменить внешний вид по умолчанию.

html
<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-* для изменения значений по умолчанию вспомогательного класса. Измените цвет с помощью любого из наших цветов темы. Обратите внимание, что светлые и темные варианты могут быть видны не на всех цветах фона, учитывая текущую поддержку цветового режима.

html
<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")
),