Перейти к основному контенту Перейти к навигации документации
Добавлено в 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">
  Custom focus ring
</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)">
  Green focus ring
</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">
  Blurry offset focus ring
</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;

API утилит Sass

В дополнение к .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 focus</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 focus</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 focus</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 focus</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 focus</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 focus</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 focus</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 focus</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")
),