Bootstrap - Focus Ring

Ethan D. - June 1, 2024

Bootstrap's Focus Ring Classes

Bootstrap has pre-defined classes that you can use to add focus rings to your elements. These classes are:

Class	Description
`.focus-ring`	Adds a default focus ring style to the element with a blue color and a thin, solid border.
`.focus-ring-primary`	Adds a focus ring with the primary color defined in your Bootstrap theme.
`.focus-ring-secondary`	Adds a focus ring with the secondary color defined in your Bootstrap theme.
`.focus-ring-success`	Adds a focus ring with the success color defined in your Bootstrap theme. Used for elements that represent a successful action or state.
`.focus-ring-danger`	Adds a focus ring with the danger color defined in your Bootstrap theme. Use for elements that indicate an error or a dangerous action.
`.focus-ring-warning`	Adds a focus ring with the warning color defined in your Bootstrap theme. Suitable for elements that require caution or attention.
`.focus-ring-info`	Adds a focus ring with the info color defined in your Bootstrap theme. Use for elements that provide informational content or feedback.
`.focus-ring-light`	Adds a focus ring with a light color. Useful when you want a subtle focus ring on a dark background.
`.focus-ring-dark`	Adds a focus ring with a dark color. Use when you need a focus ring that stands out on a light background.

To add a focus ring to an element, add the desired class to the element's class attribute.

Example: Adding a Focus Ring

<button class="btn btn-primary focus-ring-primary">Click me</button>

These focus ring classes make it easy to add focus indicators to your Bootstrap-based website or application that are consistent and look good. Choose the class that works best for your design and accessibility needs.

Customizing Focus Ring Styles

While Bootstrap provides pre-defined focus ring classes, you may want to customize the focus ring styles to match your website's design better. Here's how you can change the focus ring styles:

Changing Focus Ring Color

To change the color of the focus ring, override the default styles in your CSS. Use the box-shadow property to set the color you want.

Example: Change Focus Ring Color

.focus-ring {
  box-shadow: 0 0 0 0.25rem rgba(255, 0, 0, 0.25);
}

Adjusting Focus Ring Width

You can adjust the width of the focus ring by changing the box-shadow property. The fourth value in the box-shadow property is the spread radius. Increase or decrease this value to make the focus ring thicker or thinner.

Example: Adjust Focus Ring Width

.focus-ring {
  box-shadow: 0 0 0 0.5rem rgba(13, 110, 253, 0.25); /* Thicker focus ring */
}

Modifying Focus Ring Opacity

To change the opacity of the focus ring, adjust the alpha value (the fourth value) in the rgba() function of the box-shadow property. A lower value makes the focus ring more transparent, while a higher value makes it more opaque.

Example: Modify Focus Ring Opacity

.focus-ring {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5); /* More opaque focus ring */
}

Creating Custom Focus Ring Classes

If you need focus ring styles that are not covered by the default Bootstrap classes, you can create your own custom focus ring classes. Define your own CSS class with the focus ring styles you want and apply it to the elements you want.

Example: Custom Focus Ring Classes

.custom-focus-ring {
  box-shadow: 0 0 0 0.25rem rgba(255, 165, 0, 0.5);
}

<button class="btn custom-focus-ring">Custom Focus Ring</button>

Applying Focus Rings to Elements

Focus rings can be added to elements on a web page to improve accessibility and user experience. Here's how you can add focus rings to common elements in Bootstrap:

Buttons

To add a focus ring to a button, add the focus ring class to the button's class attribute.

Example: Buttons

<button class="btn btn-primary focus-ring-primary">Click me</button>

Links

You can apply focus rings to links to make them more noticeable when they receive keyboard focus.

Example: Links

<a href="#" class="link-primary focus-ring-primary">Read more</a>

Form Controls

Form controls, such as input fields, textareas, checkboxes, and radio buttons, can benefit from focus rings to highlight the currently focused element.

Input Fields

Add the focus ring class to the input field to give it a focus ring when it receives focus.

Example: Input Fields

<input type="text" class="form-control focus-ring-secondary" placeholder="Enter your name">

Textareas

You can apply focus rings to textareas to indicate when they are being edited.

Example: Textareas

<textarea class="form-control focus-ring-info" rows="4" placeholder="Write your message here"></textarea>

Checkboxes

Checkboxes can have focus rings to make them more accessible and easy to identify.

Example: Checkboxes

<div class="form-check">
  <input class="form-check-input focus-ring-success" type="checkbox" id="checkbox1">
  <label class="form-check-label" for="checkbox1">Option 1</label>
</div>

Radio Buttons

Radio buttons can have focus rings to indicate which option is currently selected when navigating with the keyboard.

Example: Radio Buttons

<div class="form-check">
  <input class="form-check-input focus-ring-danger" type="radio" name="radio-group" id="radio1">
  <label class="form-check-label" for="radio1">Option 1</label>
</div>

Custom Components

Focus rings can be applied to custom components that you create. Add the focus ring class to the component's container or the element that should receive the focus ring.

Example: Custom Components

<div class="custom-component focus-ring-warning">
  <!-- Custom component content -->
</div>

Focus Ring Visibility

Focus rings are an important accessibility feature, but they can sometimes be visually distracting for users who navigate using a mouse or touchscreen. Bootstrap provides a way to control focus ring visibility based on the user's input method.

Showing Focus Rings on Keyboard Focus

By default, focus rings are shown when an element receives focus via keyboard navigation. This helps keyboard users identify which element they are currently focused on.

Bootstrap automatically shows focus rings when an element is focused using the keyboard. You don't need to add any extra code to enable this behavior.

Hiding Focus Rings on Mouse Click

When a user clicks on an element using a mouse, the focus ring may not be necessary since the click already provides visual feedback. Bootstrap allows you to hide focus rings when an element is clicked using a mouse.

Example: Hiding Focus Rings with .focus-ring-mouse

<button class="btn btn-primary focus-ring focus-ring-mouse">Click me</button>

With this class, the focus ring will be shown only when the element is focused using the keyboard and will be hidden when clicked with a mouse.

Toggling Focus Ring Visibility with JavaScript

In some cases, you may want more control over when focus rings are visible. You can use JavaScript to toggle focus ring visibility based on the user's input method.

Example: Toggle Focus Rings with JavaScript

const focusRingClass = 'focus-ring';
const mouseClass = 'focus-ring-mouse';

document.addEventListener('mousedown', () => {
  document.body.classList.add(mouseClass);
});

document.addEventListener('keydown', (event) => {
  if (event.key === 'Tab') {
    document.body.classList.remove(mouseClass);
  }
});

We add the .focus-ring-mouse class to the <body> element when a mouse click is detected. This hides the focus rings for mouse users. When the user presses the Tab key to navigate using the keyboard, we remove the .focus-ring-mouse class, allowing focus rings to be visible again.

By controlling focus ring visibility based on the user's input method, you can provide a better user experience while still maintaining accessibility for keyboard users.