css - How to add outline-offset to Bootstrap-5 focus-ring? - Stack Overflow

admin管理员组

文章数量:1346195

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

Share Improve this question Follow edited 2 days ago Luke K asked 2 days ago Luke KLuke K 2155 bronze badges New contributor Luke K is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. 4

• 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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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;
}

本文标签： cssHow to add outlineoffset to Bootstrap5 focusringStack Overflow