When you interact with a button in Chrome, a blue outline or border often appears, which is known as the focus outline. This is a default accessibility feature of the browser, helping users identify which page element currently has keyboard focus. However, from a visual design perspective, this default effect may not align with your website's design.
To remove this blue border from buttons or other focusable elements using custom CSS, you can set the outline property to none. However, while removing this border, to maintain accessibility and a good user experience, you should provide an alternative focus indicator. This can be achieved by changing the background color, border color, or using other visual effects.
Here is a simple example demonstrating how to remove the default focus outline from a button and replace it with another style:
button:focus { outline: none; /* Remove the default focus outline */ border: 2px solid #FFA500; /* Provide a clear focus indicator, such as an orange border */ box-shadow: 0 0 5px #FFA500; /* Optional, add extra shadow effect as focus indicator */ }
When implementing, you should carefully consider whether you truly need to remove this focus outline, as it is an important accessibility feature for users navigating with a keyboard. If you decide to remove it, you must ensure that you clearly indicate the focus state of elements through other means to maintain website accessibility.
For example, you might implement a button as follows:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Custom Button Styling</title> <style> button { padding: 10px 20px; background-color: #1E90FF; color: white; border: none; border-radius: 4px; cursor: pointer; } /* When the button is focused, change the background color and border */ button:focus { outline: none; border: 2px solid #FFA500; background-color: #187bcd; } </style> </head> <body> <button type="button">Click me</button> </body> </html>
In this example, when the button receives focus, in addition to removing the default blue border, the background color darkens and an orange border is added to distinguish the focus state. This ensures that even after removing the default focus outline, users can still identify the focused element through color changes, maintaining a good user experience and accessibility.