当我用 border-radius 聚焦我的输入时，会出现一个方形边框

Question

当我用 聚焦我的输入时border-radius，会出现一个方形边框。

我可以让第二个边界消失还是只是设置一个border radius？

input[type="text"]{
  border: 1px solid red;
  border-radius:10px;
}

<input type="text">

这是方形边框：

谢谢。

Answer 1

蓝色矩形被引用，因为outline您可以通过outline: none规则隐藏它

input[type="text"] {
  border: 1px solid red;
  border-radius:10px;
}
input[type="text"]:focus {
  outline: none
}

<input type="text">

当然，您可以对其进行样式设置。请参阅此文档以查看适用规则。

*更新*：在我的回答中，我假设问题是关于删除 HTML 元素的轮廓以提供自定义元素。正如@Antifish 让我注意到这是一种不好的做法，除非您不提供替代样式。

我查找了一些额外的资源，发现有人为此建立了一个网站，并且明确指出：

将焦点定义到导航元素是一项可访问性要求，它在Web 内容可访问性指南中明确说明：

2.4.7 焦点可见：任何可通过键盘操作的用户界面都具有键盘焦点指示器可见的操作模式。(AA级)