Focus ring

实用工具类，用于向图元和构件添加和修改自定义焦环样式。

On this page

.focus-ring 帮助程序删除 :focus上的默认outline，代之以可以更广泛自定义的box-shadow。新阴影由一系列CSS变量组成，这些变量从 :root 级别继承，可以为任何元素或组件进行修改。

实例

直接单击下面的链接查看focus ring 的作用，或点击进入下面的示例，然后按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变量、实用程序或自定义样式修改focus ring 的样式。

CSS变量

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

Green 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变量生成的。

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

Blurry offset 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-x: 10px; --bs-focus-ring-y: 10px; --bs-focus-ring-blur: 4px">
  Blurry offset focus ring
</a>

Sass变量

自定义focus ring 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，我们还有几个.focuz-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>

Focus ring 工具集在我们的实用程序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")
),