Invisible focus outline in chrome for button element

[vovochka-dev]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

The element is typically expected to display an outline when it receives focus. However, in some cases, the default styling of buttons, particularly in Bootstrap, hides the outline for buttons. As a result, the outline is not visible when a button receives focus, and this behavior is observed in certain browsers like Chrome.

While it may be a browser-specific issue, there are ways to address this problem within the context of Bootstrap.

It's because In _reboot.scss we set:

button {
  border-radius: 0;
}

Reduced test cases

In Bootstrap
https://codepen.io/vovochka-dev/pen/PoxQvoY

Without Bootstrap
https://codepen.io/vovochka-dev/pen/RwqQmaz

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3.0

[julien-deramond]

Thanks for submitting this issue @vovochka-dev.
I'm not sure to understand what's the issue here. Are you using the buttons without Bootstrap CSS?

[vovochka-dev]

Thanks for submitting this issue @vovochka-dev. I'm not sure to understand what's the issue here. Are you using the buttons without Bootstrap CSS?

I am not using the buttons without Bootstrap CSS , I want use default unstyled button element with Bootstrap CSS. But Bootstrap CSS change default button element behaviour.

One of the reasons Bootstrap uses classes like .btn instead of applying styles directly to the button element itself is to allow for flexibility and compatibility with various scenarios and customization needs.

By using classes to apply styles, Bootstrap maintains a separation between the structural HTML elements and the visual styling applied to them. This allows users to easily customize the appearance of elements while keeping the core HTML structure intact.

In scenarios where third-party libraries or content WYSIWYG editors are used within a Bootstrap layout, it's important to preserve the basic characteristics of HTML elements, including the focus outline. This ensures that the accessibility and usability of the elements are not compromised.

By following best practices and not overly modifying the essential characteristics of HTML elements, such as the focus outline, you can maintain compatibility with external components, improve accessibility, and make it easier to work with different tools and editors.