フォーカスリング Focus ring
要素とコンポーネントにカスタムfocus ringスタイルを追加および変更できるユーティリティクラスです。
.focus-ringヘルパーは:focusのデフォルトのoutlineを削除し、より広範囲にカスタマイズできるbox-shadowに置き換えます。新しいshadowは、:rootレベルから継承された一連のCSS変数で構成されており、任意の要素やコンポーネントに対して変更できます。
例
focus ringの動作を確認するには、下のリンクを直接クリックするか、下の例をクリックしてからTabキーを押してください。
<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変数を変更してデフォルトの外観を変更します。
<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変数から生成されます。
--#{$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">
Blurry offset focus ring
</a>Sass変数
focus ringのSass変数をカスタマイズして、Bootstrapを利用したプロジェクト全体でのfocus ringスタイルのすべての使用を変更します。
$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-*ユーティリティがあります。テーマカラーのいずれかを使用して色を変更します。現在のカラーモードのサポートを考慮すると、lightとdarkのバリアントはすべての背景色で表示されない場合があることに注意してください。
<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の使用方法を学ぶ。
"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")
),