聚焦环

工具类，允许你向元素和组件添加和修改自定义焦点环样式。

本页目录

这 .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 变量

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

绿色对焦环

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

scss/_root.scss

--#{$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 变量。修改它们以更改默认外观。

模糊的偏移对焦环

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 的项目中焦点环样式的所有使用。

scss/_variables.scss

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

scss/_utilities.scss

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