html - 默认按钮在点击时不显示轮廓样式

Question

为什么默认按钮在点击时不显示任何轮廓样式，而自定义按钮在点击时显示轮廓样式？

如何在单击时从自定义按钮中删除轮廓样式，但在用户使用键盘导航到它时保留轮廓样式(与默认按钮的行为相同)？

.btn {
  display: inline-block;
  padding: 12px;
  background: cyan;
  border: none;
}

<div>
    <button type="button">Why no outline styles on click?</button>
</div>
<div style="margin-top: 24px">
    <button class="btn">Why outline styles on click?</button>
</div>

更新:出于可访问性原因，我无法使用大纲:无。引用:http://www.outlinenone.com/

Answer 1

如果您担心可访问性，那么为什么要删除轮廓？通过删除轮廓但添加不同的样式来实现可访问性是完全可以的:例如 background-color、color 或 border .