メインコンテンツにスキップ ドキュメントナビゲーションにスキップ

フォーカスリング（Focus ring） v5.3.0新設

要素やコンポーネントにカスタムフォーカスリングスタイルを追加・変更するためのユーティリティクラス。

※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
このページの項目 v5.3.0新設

.focus-ring ヘルパーは :focus のデフォルトのアウトラインを削除し、より広範囲にカスタマイズ可能な box-shadow に置き換える。新しいシャドウは一連のCSS変数で構成されて:root レベルから継承され、任意の要素やコンポーネントに対して変更できる。

実例（Example）

下の見本をクリックし、Tab キー（進む）か Shift + Tab キー（戻る）を押すと、フォーカスリングの動作を確認できる。

見本
カスタムフォーカスリング
設定例
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
  カスタムフォーカスリング
</a>
【設定】
  • a.focus-ring

カスタマイズ（Customize）

CSS変数、Sass変数、ユーティリティ、カスタムスタイルを使用して、フォーカスリングのスタイルを変更。

CSS変数（CSS variables）

デフォルトの外観を変更するには、必要に応じて --bs-focus-ring-* CSS変数を変更する。

見本
緑のフォーカスリング
設定例
<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)">
  緑のフォーカスリング
</a>

.focus-ring は、上記のように任意の親要素で再定義可能なグローバルCSS変数を経由してスタイルを設定。これらの変数は、Sass変数の対応するものから生成される。

デフォルトの設定
scss/_root.scss 内 root-focus-variables の設定--#{$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 変数が提供される。デフォルトの外観を変更するには、それらを修正する。

見本
ぼやけたオフセットフォーカスリング
設定例
<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">
  ぼやけたオフセットフォーカスリング
</a>

Sass変数（Sass variables）

フォーカスリングのSass変数をカスタマイズして、Bootstrapを使用するプロジェクト全体のフォーカスリングスタイルのすべての使用法を変更。

デフォルトの設定
scss/_variables.scss 内 focus-ring-variables の設定$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-* ユーティリティがいくつか用意されている。テーマカラーのいずれかでカラーを変更する。現在のカラーモードのサポートでは、LightとDarkのバリエーションでは背景色によっては表示されないかもしれないので注意。

リングカラーの種類

Primary（デフォルトでは .focus-ring と同じ）：.focus-ring.focus-ring-primary

Primaryフォーカス

Secondary：.focus-ring.focus-ring-secondary

Secondaryフォーカス

Success：.focus-ring.focus-ring-success

Successフォーカス

Danger：.focus-ring.focus-ring-danger

Dangerフォーカス

Warning：.focus-ring.focus-ring-warning

Warningフォーカス

Info：.focus-ring.focus-ring-info

Infoフォーカス

Light：.focus-ring.focus-ring-light

Lightフォーカス

Dark：.focus-ring.focus-ring-dark

Darkフォーカス

設定例
Primaryの場合<p><a href="#" class="d-inline-flex focus-ring focus-ring-primary py-1 px-2 text-decoration-none border rounded-2">フォーカス</a></p>
【設定】
  • a.focus-ring に .focus-ring-{themecolor}（上記の「リングカラーの種類」から選択）を入れる
    • {themecolor} は、primary, secondary, success, danger, warning, info, light, dark のいずれかを選択

フォーカスリングのユーティリティは、scss/_utilities.scss のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらに掲載。

デフォルトの設定
scss/_utilities.scss 内 utils-focus-ring の設定"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")
),