The dotted line (outline) that appears when a button is in focus is displayed by default for accessibility, and is intended to allow users to operate buttons with keyboard controls. However, in some designs, it may be desirable to hide the dotted lines. In this case, the solution is to disable outlines in CSS.
CSS for Disabling Dotted Lines (Outlines)
To hide the dotted line when focusing, use the following CSS
button:focus {
border: 0 !important;
outline: none !important;
}After applying this code, the dotted line and outline will no longer appear when the button is focused.
Note from an accessibility perspective
Hiding the dotted line is visually cleaner, but may affect accessibility. In particular, keyboard and screen reader users will not be able to visually see the button that is currently in focus. Therefore, it is recommended that alternative visual feedback be added in the following ways
Recommended alternative styles
A background color or shadow is an effective way to provide feedback when focus is applied. Example:
button:focus {
outline: none;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}In this example, a blue shadow is displayed to give visual feedback when the button receives focus. This makes it easier for users who need to use the keyboard.
Conclusion
When removing dotted lines from buttons, it is necessary to take into account not only the appearance of the design, but also accessibility when setting the style. If necessary, customize the feedback method when focusing and aim for a user-friendly design.