Anillo de enfoque (Focus ring)

El ayudante (helper) .focus-ring elimina el contorno (outline) predeterminado en :focus, reemplazándolo por una sombra de caja (box-shadow) que se puede personalizar de forma más amplia. La nueva sombra se compone de una serie de variables CSS, heredadas desde el nivel :root, que se pueden modificar para cualquier elemento o componente.

Ejemplo

Haz clic directamente en el siguiente enlace para ver el anillo de enfoque en acción, o haz clic dentro del siguiente ejemplo y luego presiona Tab.

<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
  Anillo de enfoque personalizado
</a>

Personalizar

Modifica el estilo de un anillo de enfoque con nuestras variables CSS, variables Sass, utilidades o estilos personalizados.

Variables CSS

Modifica las variables CSS --bs-focus-ring-* según sea necesario para cambiar la apariencia predeterminada.

<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)">
  Anillo de enfoque verde
</a>

.focus-ring establece estilos a través de variables CSS globales que se pueden sobrescribir en cualquier elemento padre, como se muestra arriba. Estas variables se generan a partir de sus contrapartes de variables Sass.

--#{$prefix}focus-ring-width: #{$focus-ring-width};
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
--#{$prefix}focus-ring-color: #{$focus-ring-color};

Por defecto, no existe --bs-focus-ring-x, --bs-focus-ring-y o --bs-focus-ring-blur, pero proporcionamos variables CSS con alternativas a los valores 0 iniciales. Modifícalos para cambiar la apariencia predeterminada.

<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">
  Anillo de enfoque con desplazamiento borroso
</a>

Variables Sass

Personaliza las variables Sass del anillo de enfoque para modificar todo el uso de los estilos de anillo de enfoque en tu proyecto basado en Bootstrap.

$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;

API de utilidades Sass (Sass utilities API)

Además de .focus-ring, tenemos varias utilidades .focus-ring-* para modificar los valores predeterminados de la clase auxiliar. Modifica el color con cualquiera de nuestros colores de tema. Ten en cuenta que las variantes clara y oscura pueden no ser visibles en todos los colores de fondo debido al soporte actual del modo de color.

<p><a href="#" class="d-inline-flex focus-ring focus-ring-primary py-1 px-2 text-decoration-none border rounded-2">Enfoque Primary</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-secondary py-1 px-2 text-decoration-none border rounded-2">Enfoque Secondary</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-success py-1 px-2 text-decoration-none border rounded-2">Enfoque Success</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-danger py-1 px-2 text-decoration-none border rounded-2">Enfoque Danger</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-warning py-1 px-2 text-decoration-none border rounded-2">Enfoque Warning</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-info py-1 px-2 text-decoration-none border rounded-2">Enfoque Info</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-light py-1 px-2 text-decoration-none border rounded-2">Enfoque Light</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-dark py-1 px-2 text-decoration-none border rounded-2">Enfoque Dark</a></p>

Las utilidades del anillo de enfoque se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende a usar la API de utilidades.

"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")
),