如何阻止浏览器在单击按钮时自动突出显示按钮？

Question

我正在尝试制作一个自定义HTML按钮元素，但是当点击它时，chrome会突出显示它（如上所述）。我该如何防止这种情况发生？

Answer 1

G＆＃39;天 - 这是按钮的焦点状态。您可以按如下方式设置样式：

button:focus {
  outline: none;
  /** Any additional styles go here **/
}

有关焦点的更多信息，请参阅CSS技巧中的这篇文章： https://css-tricks.com/almanac/selectors/f/focus/

Answer 2

解决方案： -

button:focus {
    /** Your CSS styles**/
}
button:active {
    /** Your CSS styles**/
}

解释： -

The :focus selector is used to select the element that has focus.
Tip: The :focus selector is allowed on elements that accept keyboard events 
or other user inputs.

Browser Support
Chrome  Safari  Firefox Opera   IE  Android iOS
4+      3.1+    Any     9.6+    8+  Any     Any

The :active selector is used to select and style the active link.
A link becomes active when you click on it.
Tip: The :active selector can be used on all elements, not only links.

Browser Support
Chrome  Safari  Firefox Opera   IE  Android iOS
4+      3.1+    Any     9.6+    8+  Any     Any

语法::

:focus {
    css declarations;
}
:active {
    css declarations;
}

注释和参考文献： -

w3schools Reference (Focus Selector) ::

w3schools Reference (Active Selector) ::

Stack Overflow Solutions ::

Answer 3

使用此代码

a:visited {
    outline: 0;
    border: 0;
}

请参阅代码以更好地了解按钮行为... https://codepen.io/zakirbd/pen/wmxxGX