单击按钮时更改边框颜色[重复]

Posted 2023-02-22

【中文标题】单击按钮时更改边框颜色[重复]

【英文标题】：Changing border color when button is clicked [duplicate]

【发布时间】：2019-08-12 16:19:11

【问题描述】：

如果你点击按钮，你会看到一个蓝色的边框，这对我来说真的很烦人。你有什么解决办法让它消失/根本不出现吗？

button
    color: aqua;
    background-color: transparent;
    border-radius: 20px;

<button>about</button>

【问题讨论】：

button:focus border: 1px solid red;

css-tricks.com/removing-the-dotted-outline/#article-header-id-0

【参考方案1】：

这不是border，而是按钮的outline。您可以在其中添加outline: none 来删除它，但您应该考虑为使用键盘导航的人添加一个替代方案。

button
    color: aqua;
    background-color: transparent;
    border-radius: 20px;
    outline: none;

<button>about</button>

【讨论】：

如果您也关心 Firefox，请查看***.com/questions/71074/…

我认为不再需要添加前缀：developer.mozilla.org/en-US/docs/Web/CSS/outline