如何删除<input />边框？

Question

我使用<input>为其设置边框样式：

input {
  font-size: 300%;
  border-width: 10px;
  border-style: solid;
  border-radius: 30px;
}

<input>

问题是，一旦<input>具有焦点，就会出现一个蓝色小边框：

我在DevTools的任何地方都没有看到它，所以我相信它本身就是<input>的一个属性，它不是有圆边框（疯狂猜测）

有可能摆脱它吗？

Answer 1

您可以使用<iostream>将其删除，但会创建accessibility issues。

outline:none

input {
  font-size: 300%;
  border-width: 10px;
  border-style: solid;
  border-radius: 30px;
  outline:none;
}

Answer 2

应该适合你

textarea:focus, input:focus{
    outline: none;
}

但是在以下链接中已经有了更详细的信息

How to remove border (outline) around text/input boxes? (Chrome)

Answer 3

＆＃13;

＆＃13;

input:focus {
  outline: none;
}

＆＃13;

＆＃13;

＆＃13;