html - 当我将输入集中在 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">

当然你可以设计它的样式..看这个doc查看适用的规则。

---

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

我查找了一些额外的资源，发现有人制作了一个 website about this并且明确指出:

Defining focus to navigation elements is an accessibility requirement, it's clearly stated in the Web Content Accessibility Guidelines:

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)