设置按钮边框半径使焦点放在点击上

Question

我发现 Chrome 上的标准 HTML 按钮有一些奇怪的行为。标准按钮在单击时不会添加轮廓；仅通过键盘聚焦。

<button type="button">Works as expects</button>

只要我添加了带有边框半径的样式，按钮就会在单击时获得轮廓。

<button type="button" style="border-radius: 5px;">Focus on click</button>

有谁知道是什么让按钮的行为如此？以及如何确保仅使用边框半径在键盘导航中添加轮廓？

Answer 1

针对问题的第一部分： 如果您右键单击圆形按钮，单击检查，然后单击计算选项卡，您可以看到通过添加样式它已经覆盖了平台原生样式：

-webkit-appearance: button;

已更改为：

-webkit-appearance: none;

按钮的背景颜色更改（当您按住单击时）也丢失了。