当我使用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以查看适用的规则。

<小时/> UPDATE ：在我的回答中，我假设问题是：删除HTML元素的大纲以提供自定义的元素。正如@Antifish让我注意到这是一个不好的做法，除非你不提供其他风格。

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

  

将焦点定义到导航元素是一个可访问性要求，它在Web Content Accessibility Guidelines中明确说明：

     

    

2.4.7焦点可见：任何键盘可操作的用户界面都具有可以看到键盘焦点指示的操作模式。 （AA级）

  

Answer 2

只需在输入中添加outline:none;即可。

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

<input type="text">

Answer 3

添加大纲：0px none;你的意见。

input[type="text"]{outline:0px none;}