フォーカスリング

要素やコンポーネントにカスタムフォーカスリングスタイルを追加および変更できるユーティリティクラス。

このページの内容

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

例

フォーカスリングを動作させるには、下のリンクを直接クリックするか、下の例に移動して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>

フォーカスリングユーティリティは、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")
),