I want to add a small offset to the focus-ring for better accessibility (increased visibility of the focus outline around a button with white space in between the button and the outline). I have a scss file set up for Bootstrap modifications but am not sure how to add an offset any time the focus-ring is used. Or is there a better way to create the white space I’m going for in Bootstrap?

Example of how it is currently - outline is touching the element

Example of how I want it to be - outline is offset with whitespace between the element and outline

I want to add a small offset to the focus-ring for better accessibility (increased visibility of the focus outline around a button with white space in between the button and the outline). I have a scss file set up for Bootstrap modifications but am not sure how to add an offset any time the focus-ring is used. Or is there a better way to create the white space I’m going for in Bootstrap?

Example of how it is currently - outline is touching the element

Example of how I want it to be - outline is offset with whitespace between the element and outline

• css
• sass
• accessibility
• focus
• bootstrap-5

• 1 Either with !important or by compiling the source with your changes. Example – IT goldman Commented 2 days ago
• 1 Please write your solution as the answer but not adding it in the question. Read: Can I answer my own question?. Thanks. – Yong Shun Commented 2 days ago
• Fixed, thank you! – Luke K Commented 2 days ago
• See: Answering your own question is encouraged – Yogi Commented yesterday

1 Answer 1

I solved it by overriding the Bootstrap CSS turning off the box-shadow that Bootstrap uses and adding an outline with an offset. Is there a more elegant way to do this other than overriding Bootstrap with !important?

   *:focus-visible {
    box-shadow: none !important;
    outline: 3px solid black !important;
    outline-offset: 2px !important;
}