How to Remove the Blue Border from Buttons in Chrome Without Compromising Accessibility?

Removing the Blue Border from Custom-Styled Buttons in Chrome

In customization efforts, setting the border to none for tags can result in a blue border appearing around the button when clicked in Chrome. While button:active { outline: none } and button:focus { outline:none } may seem like viable solutions, they fail to eliminate the issue.

Recommended Approach:

It's highly discouraged to remove focus or outline styling as this compromises website accessibility. For more information, refer to this discussion.

Alternative Approach (Not Recommended):

If deemed necessary, this CSS code can effectively remove the blue border:

button:focus { outline:0; }

Copy after login

A working example can be found in this JSFiddle: http://jsfiddle.net/u4pXu/

The above is the detailed content of How to Remove the Blue Border from Buttons in Chrome Without Compromising Accessibility?. For more information, please follow other related articles on the PHP Chinese website!