对焦环

.focus-ring 辅助程序删除了 :focus 上的默认 outline，将其替换为可以更广泛自定义的 box-shadow。新的阴影由一系列继承自 :root 级别的 CSS 变量组成，可以针对任何元素或组件进行修改。

¥The .focus-ring helper removes the default outline on :focus, replacing it with a box-shadow that can be more broadly customized. The new shadow is made up of a series of CSS variables, inherited from the :root level, that can be modified for any element or component.

示例

¥Example

直接点击下面的链接查看正在运行的对焦环，或者进入下面的示例，然后按 Tab。

¥Click directly on the link below to see the focus ring in action, or into the example below and then press Tab.

<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
  Custom focus ring
</a>

定制

¥Customize

使用我们的 CSS 变量、Sass 变量、工具或自定义样式修改聚焦环的样式。

¥Modify the styling of a focus ring with our CSS variables, Sass variables, utilities, or custom styles.

CSS 变量

¥CSS variables

根据需要修改 --bs-focus-ring-* CSS 变量以更改默认外观。

¥Modify the --bs-focus-ring-* CSS variables as needed to change the default appearance.

<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 变量对应项生成的。

¥.focus-ring sets styles via global CSS variables that can be overridden on any parent element, as shown above. These variables are generated from their Sass variable counterparts.

--#{$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，但我们提供了可回退到初始 0 值的 CSS 变量。修改它们以更改默认外观。

¥By default, there is no --bs-focus-ring-x, --bs-focus-ring-y, or --bs-focus-ring-blur, but we provide CSS variables with fallbacks to initial 0 values. Modify them to change the default appearance.

<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 variables

自定义聚焦环 Sass 变量，以修改 Bootstrap 支持的项目中聚焦环样式的所有使用情况。

¥Customize the focus ring Sass variables to modify all usage of the focus ring styles across your Bootstrap-powered project.

$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

¥Sass utilities API

除了 .focus-ring 之外，我们还有几个 .focus-ring-* 工具来修改辅助类默认值。使用我们的任何主题颜色 修改颜色。请注意，鉴于当前颜色模式支持，浅色和深色变体可能在所有背景颜色上都不可见。

¥In addition to .focus-ring, we have several .focus-ring-* utilities to modify the helper class defaults. Modify the color with any of our theme colors. Note that the light and dark variants may not be visible on all background colors given current color mode support.

<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>

聚焦环工具在 scss/_utilities.scss 中的工具 API 中声明。Learn how to use the utilities API.

¥Focus ring utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities 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")
),