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