如何禁用输入按钮的默认样式？

Question

当输入按钮聚焦时，其边框颜色将变为蓝色。如何禁用它？

Answer 1

您可以将:focus pseudo-class与outline: 0; property and value结合使用。

.input2:focus {
  outline: 0;
}

<input type="text">
<input class="input2" type="text">

作为最佳实践，除非您要添加一个自己的焦点指示器，否则不应删除焦点指示器。在这种情况下，该指示器将包裹整个搜索框。这是该主题的article。

您可能还对新的:focus-visible pseudo-class感兴趣，它可以帮助防止将焦点集中在某些组件（例如按钮）的键盘单击上。不幸的是，:focus-visible目前限制了support，但应该会在2019年看到更多的浏览器启用它。