Focus ring

Helper classes which can be used to add and modify custom focus ring styles to elements and components.

Create amazing Typeform-like forms and pages just by writing Markdown!

Example #

The .focus-ring helper class removes the default outline on :focus, replacing it with a box-shadow that can be more broadly customized. The new shadow is made up of a series of CSS variables, inherited from the :root level, that can be modified for any element or component.

Click directly on the link below (styled as a card) to see the focus ring in action, or into the example below and then press tab to focus with your keyboard.

HTML
<!-- Focus ring -->
<a href="#" class="focus-ring">...</a>

Customization #

You can modify the --bs-focus-ring-* CSS variables as needed to change the default appearance. For example, here's one modified to use the info color.

HTML
<!-- Info focus ring -->
<a href="#" class="focus-ring" style="--bs-focus-ring-color: hsla(var(--bs-info-hsl), 0.25);">...</a>

The .focus-ring class sets styles via global CSS variables that can be overridden on any parent element, as shown above. By default, there is no --bs-focus-ring-x, --bs-focus-ring-y, or --bs-focus-ring-blur, but we provide CSS variables with fallbacks to initial 0 values. Modify them to change the default appearance.

HTML
<!-- Blurry focus ring -->
<a href="#" class="focus-ring" style="--bs-focus-ring-x: 8px; --bs-focus-ring-y: 8px; --bs-focus-ring-blur: 2px;">...</a>

Utilities #

In addition to .focus-ring, you can also use .focus-ring-{color} utilities to modify the helper class defaults. The {color} can be primary, secondary, success, danger, warning, info, light, or dark. Note that the light and dark variants may not be visible on all background colors given current color mode support.

HTML
<!-- Warning focus ring -->
<a href="#" class="focus-ring focus-ring-warning">...</a>

<!-- Info focus ring -->
<a href="#" class="focus-ring focus-ring-info">...</a>

Please note, in the above example, the color and background-color has been changed by using the color and background helpers.

Up next
Icon link

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.