Focus ring

可讓您為元素和元件新增及修改自訂 focus ring 樣式的通用類別。

本頁內容

.focus-ring 輔助類別會移除 :focus 的預設 outline，並以可更廣泛自訂的 box-shadow 取代。這個新的陰影由一系列從 :root 層級繼承的 CSS 變數組成，可為任何元素或元件進行修改。

範例（Example）

直接點擊下方連結以查看 focus ring 的效果，或點擊範例內部然後按 Tab。

Custom focus ring

html

<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 變數、通用類別或自訂樣式來修改 focus ring 的樣式。

CSS 變數（CSS variables）

根據需要修改 --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-blur，但我們提供了具有初始值 0 作為 fallback 的 CSS 變數。修改它們以改變預設外觀。

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 變數（Sass variables）

自訂 focus ring 的 Sass 變數，以修改整個 Bootstrap 專案中所有 focus ring 樣式的使用。

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（Sass utilities 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>

Focus ring 通用類別在 scss/_utilities.scss 的通用類別 API 中宣告。了解如何使用通用類別 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")
),