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

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

Пример

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

<ahref="#"class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2"> Специальное кольцо фокусировки
</a>

Кастомизация

Измените стиль кольца фокусировки с помощью наших переменных CSS, переменных Sass, утилит или пользовательских стилей.

CSS переменные

При необходимости измените переменные CSS --bs-focus-ring-*, чтобы изменить внешний вид по умолчанию.

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

<ahref="#"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:00$focus-ring-blur$focus-ring-width$focus-ring-color;

Sass API утилиты

Помимо .focus-ring, у нас есть несколько утилит .focus-ring-* для изменения значений по умолчанию вспомогательного класса. Измените цвет с помощью любого из наших цветов темы. Обратите внимание, что светлые и темные варианты могут быть видны не на всех цветах фона, учитывая текущую поддержку цветового режима.

<p><ahref="#"class="d-inline-flex focus-ring focus-ring-primary py-1 px-2 text-decoration-none border rounded-2">Primary фокус</a></p><p><ahref="#"class="d-inline-flex focus-ring focus-ring-secondary py-1 px-2 text-decoration-none border rounded-2">Secondary фокус</a></p><p><ahref="#"class="d-inline-flex focus-ring focus-ring-success py-1 px-2 text-decoration-none border rounded-2">Success фокус</a></p><p><ahref="#"class="d-inline-flex focus-ring focus-ring-danger py-1 px-2 text-decoration-none border rounded-2">Danger фокус</a></p><p><ahref="#"class="d-inline-flex focus-ring focus-ring-warning py-1 px-2 text-decoration-none border rounded-2">Warning фокус</a></p><p><ahref="#"class="d-inline-flex focus-ring focus-ring-info py-1 px-2 text-decoration-none border rounded-2">Info фокус</a></p><p><ahref="#"class="d-inline-flex focus-ring focus-ring-light py-1 px-2 text-decoration-none border rounded-2">Light фокус</a></p><p><ahref="#"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")),